js基础之继承

前言

很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。 ----js高级程序设计

实现方式

原型链

每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

  function SuperType() {
    this.property = true
  }
  SuperType.prototype.getSuperValue = function () {
    return this.property
  }
  function SubType() {
    this.subproperty = false
  }
  // 继承 SuperType
  SubType.prototype = new SuperType()
  SubType.prototype.getSubValue = function () {
    return this.subproperty
  }
  let instance = new SubType()
  console.log(instance.getSuperValue()) // true

SubType把原型赋值给了SuperType的实例，而SuperType的实例能访问构造函数的所有属性和方法，意味着SubType也能访问，这就实现了SubType对SuperType的继承。

原型搜索机制：在读取实例上的属性时，首先会在实例上搜索这个属性。如果没找到，则会继承搜索实例的原型。在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型，一直持续到原型链的末端。

缺点：

在原型中包含引用值的时候，引用值会在所有实例间共享。
子类型在实例化时不能给父类型的构造函数传参

盗用构造函数

为了解决原型包含引用值导致的继承问题，出现了一种叫作“盗用构造函数”的技术。基本思路是在子类构造函数中调用父类构造函数。解决了原型链的引用值共享和不能传参问题。

function SuperType(name) {
 this.name = name
 this.colors = ["red", "blue", "green"];
}
function SubType() {
 // 继承 SuperType
 SuperType.call(this, 'shetia');
}
let instance1 = new SubType();
console.log(instance1.name)    // "shetia"
instance1.colors.push("black");
console.log(instance1.colors); // "red,blue,green,black"
let instance2 = new SubType();
console.log(instance2.colors); // "red,blue,green"

缺点

必须在构造函数中定义方法，因此函数不能重用。
子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

组合继承

综合了原型链和盗用构造函数，将两者的优点集中了起来。

基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
};
function SubType(name, age){
    // 继承属性
    SuperType.call(this, name);
    this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function() {
    console.log(this.age);
};
let instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); // "red,blue,green,black"
instance1.sayName(); // "Nicholas";
instance1.sayAge(); // 29
let instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // "red,blue,green"
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27

组合继承弥补了原型链和盗用构造函数的不足，是 JavaScript 中使用最多的继承模式。

原型式继承

通过创建一个临时构造函数，把该构造函数原型赋值给传入的对象，再返回临时构造函数的一个实例。

function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}

let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
let anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
let yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie"

ECMAScript 5 通过增加 Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时， Object.create()与这里的 object()方法效果相同。

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。

属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的。

寄生式继承

与原型式继承类似：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function createAnother(original){
    let clone = object(original); // 通过调用函数创建一个新对象
    clone.sayHi = function() { // 以某种方式增强这个对象
    console.log("hi");
    };
    return clone; // 返回这个对象
}
let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
let anotherPerson = createAnother(person);
anotherPerson.sayHi(); // "hi"

注意通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

寄生式组合继承

为解决组合继承会调用两次是父类构造函数问题。

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。

基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。

function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype); // 创建对象
    prototype.constructor = subType; // 增强对象
    subType.prototype = prototype; // 赋值对象
}

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
};
function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
    console.log(this.age);
};

总结

原型链继承是通过重写构造函数原型为另一个构造函数实例实现继承。

盗用构造函数继承解决了原型链继承的引用值共享和不能传参问题。

组合继承综合了原型链继承和构造函数继承的优点，解决构造函数继承不能访问父类原型上的属性和方法问题。

原型式继承主要通过Object.create()。

寄生式继承增强了原型式继承。

寄生组合式继承解决组合继承调用两次父类构造函数问题。