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 = 0;
    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);
}; 
复制代码