浅谈JS的原型和继承

1. 原型

在JavaScript中，每个对象都有一个原型对象，它充当了该对象的基础。原型对象是一个普通的对象，用于存储对象所继承的属性和方法。

我们可以使用Object.getPrototypeOf(obj)方法获取一个对象的原型。

var obj = {};
console.log(Object.getPrototypeOf(obj)); //输出：Object {}

这里输出的是一个空对象，也就是Object构造函数的原型对象。

对象实例可以通过__proto__属性来访问它的原型对象。这里需要注意的是，__proto__只是一种访问原型对象的方式，尽量不要直接使用它去修改原型对象。在ES6中，__proto__属性已经被标准化为Object.setPrototypeOf()和Object.getPrototypeOf()方法。

var obj = {};
console.log(obj.__proto__); //输出：Object {}
console.log(Object.getPrototypeOf(obj)); //输出：Object {}

我们还可以使用Object.create(proto)方法来创建具有指定原型的新对象。

var protoObj = {
  welcome: function() {
    console.log("Welcome to Prototype Inheritance Demo!");
  }
}
var obj = Object.create(protoObj); //新建一个继承了protoObj的对象
obj.welcome(); //输出：Welcome to Prototype Inheritance Demo!

以上是原型的基础知识。

2. 继承

在JavaScript中，对象可以通过原型链来实现继承。当我们访问一个对象的属性或方法时，JavaScript会从该对象开始，沿着原型链向上查找，直到找到属性或方法或到达原型链的末尾为止。如果最终仍然没有找到，则返回undefined。

var protoObj = {
  name: "Proto"
};
var obj = Object.create(protoObj);
console.log(obj.name); //输出：Proto

这里，obj继承了protoObj的name属性。

在实际开发中，我们通常会使用构造函数来创建对象，构造函数中的this指向的就是新建立的对象。我们可以将一些共有属性和方法添加到构造函数原型对象上，这些属性和方法可以被该构造函数创建的所有对象所共享。

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() {
  console.log("My name is " + this.name);
}
var p1 = new Person("Tom");
var p2 = new Person("Jerry");
p1.sayName(); //输出：My name is Tom
p2.sayName(); //输出：My name is Jerry

这里，Person构造函数的原型对象有一个sayName方法，它可以被所有通过Person构造函数创建出的对象所共享。

JavaScript的继承是通过原型链（prototype chain）来实现的。当我们创建一个新的对象时，可以使用Object.create(proto)方法来指定该对象的原型。

当我们访问对象的某个属性或方法时，如果该对象本身没有该属性或方法，JavaScript会沿着原型链向上查找，直到找到为止。

例如，我们定义一个Rectangle对象，它有width和height属性，还有一个getArea()方法，用于计算矩形的面积。

function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
Rectangle.prototype.getArea = function() {
  return this.width * this.height;
}

如果我们想创建一个正方形对象，可以通过继承Rectangle对象来实现，如下所示：

function Square(side) {
  Rectangle.call(this, side, side);
}
Square.prototype = Object.create(Rectangle.prototype);
Square.prototype.constructor = Square;

在上面的代码中，通过调用Rectangle构造函数的call方法，在Square构造函数中创建了一个新的Rectangle对象，再将该对象的width和height属性都设置为side，从而创建了一个新的正方形对象。然后，我们通过使用Object.create方法来创建一个继承了Rectangle.prototype的新对象，并将其设置为Square.prototype。最后将Square的构造函数设置回Square.prototype.constructor。

现在我们可以创建一个正方形对象并调用它的getArea()方法：

var square = new Square(5);
console.log(square.getArea()); //输出：25

以上就是JavaScript原型和继承的基础知识以及一个继承的示例，希望对您有所帮助。