继承的几种方法详解

1.原型链继承

1.1 实现

构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。

原型链：在读取实例上的属性时，首先会在实例上搜索这个属性；如果没有找到，则会继承搜索实例的原型。在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型。这样一层一层向上寻找就构成了原型链。对属性和方法的搜索会持续到原型链的末端。

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

所实现的基本思想：将构造函数的原型设置为另一个构造函数的实例对象。

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()); //ture

以上代码定义了两个类型：SuperType和SubType。这两个类型分别定义了一个属性和一个方法。这两个类型的主要区别是SubType通过创建SuperType的实例并将其赋值给自己的原型SubType.prototype实现了对SuperType的继承。
这个赋值重写了SubType最初的原型，将其替换为SuperType的实例。这意味着SuperType实例可以访问的所有属性和方法也会存在于SubType.prototype。这样实现继承知乎，代码紧接着又给SubType.prototype，也就是这个SuperType的实例添加了一个新方法。最后又创建了SubType的实例实例并调用了它继承的getSuperValue()方法。

1.2 默认原型

实际上，原型链中默认情况下，所有引用类型都继承自Object，这也是通过原型链实现的。任何函数的默认原型都是一个Object的实例，这意味着这个实例有一个内部指针指向Object.prototype。这也是为什么自定义类型都能够继承包括toString()、valueOf()在内的所有默认方法的原因。
上面代码完整的原型链：

SubType继承SuperType，而SuperType继承Object。在调用instance.toString()时，实际上调用的是保存在Object.prototype上的方法。

1.3 原型与继承关系

原型与实例的关系可以通过两种方式来确定。
1）使用instanceof操作符。
如果一个实例的原型链中出现过相应的构造函数，则instanceof返回true

console.log(instance instanceof Object); //true
console.log(instance instanceof SuperType); //true
console.log(instance instanceof SubType); //true

2）使用isPrototypeOf()方法。原型链中的每个原型都可以调用这个方法。
只要原型链中包含这个原型，这个方法就返回true

console.log(Object.prototype.isPrototypeOf(instance)); //true
console.log(SuperType.prototype.isPrototypeOf(instance)); //true
console.log(SubType.prototype.isPrototypeOf(instance)); //true

1.4 关于方法

子类有时候需要覆盖父类的方法，或者增加父类没有的方法。
这些方法必须在原型赋值之后再添加到原型上。

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;
}
// 覆盖已有的方法
SubType.prototype.getSuperValue=function(){
    return false;
}
let instance=new SubType();
console.log(instance.getSuperValue()); //false

如上代码中，getSubValue()是SubType的新方法；getSuperValue()是原型链上已经存在的但在这里被覆盖的方法。
后面在SubType实例上调用getSuperValue()时调用的是已经覆盖的方法；而SuperType的实例仍然会调用最初没有被覆盖的方法。重点在于上述两个方法都是在把原型赋值为SuperType的实例之后定义的。

1.5 原型链继承的缺点

function SuperType(){
    this.colors=["red","blue","green"];
}
function SubType(){}
// 继承SuperTpe
SubType.prototype=new SuperType();

let instance1=new SubType();
instance1.colors.push("black");
console.log(instance1.colors); //[ 'red', 'blue', 'green', 'black' ]

let instance2=new SubType();
console.log(instance2.colors); //[ 'red', 'blue', 'green', 'black' ]
//修改instance1.colors会影响instance2.colors

1）所有的子类的实例都会共享父类的实例属性，修改了一个实例对象的引用类型的值，其他的实例对象的值也会被修改
2）子类型在实例化时不能给父类型的构造函数传参

2.借用构造函数

2.1 实现

思路：在子类构造函数中调用父类构造函数。
因为函数就是在特定的上下文中执行代码的简单对象，所以可以用apply()和call()方法以新创建的对象为上下文执行构造函数。

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

let instance2=new SubType();
console.log(instance2.colors); //[ 'red', 'blue', 'green' ]

通过使用call()或apply()方法，SuperType构造函数在为SubType的实例创建新对象的上下文中执行了。相当于新的SubType对象运行了SuperType()函数中所有的初始代码。

2.2 传递参数

相比于使用原型链，借用构造函数的一个优点就是可以在子类构造函数中向父类构造函数传参。

function SuperType(name){
    this.name=name;
}
function SubType(){
    // 继承SuperType并传参
    SuperType.call(this,"Tom");

    // 实例属性
    this.age=18;
}
let instance=new SubType();
console.log(instance.name); //Tom
console.log(instance.age); //18

在上面例子中，SuperType构造函数接收一个参数name，然后将它赋值给一个属性。在SubType构造函数中调用SuperType构造函数时传入这个参数，实际上会在SubType的实例上定义name属性。

2.3 缺点

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

3.组合继承

综合了原型链和借用构造函数，将两者的优点集中起来。
思路：使用原型链继承原型上的属性和方法，而通过借用构造函数继承实例属性。
这样既可以把方法定义在原型上重复使用，又可以让每个实例都有自己的属性。

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("Tom",18);
instance1.colors.push("black");
console.log(instance1.colors); //[ 'red', 'blue', 'green', 'black' ]
instance1.sayName(); //Tom
instance1.sayAge(); //18

let instance2=new SubType("Jerry",17);
console.log(instance2.colors); //[ 'red', 'blue', 'green' ]
instance2.sayName(); //Jerry
instance2.sayAge(); //17

在这个例子中，SuperType构造函数定义了两个属性，name和colors，而它的原型上也定义了一个方法sayName()。SubType构造函数调用了SuperType构造函数，传入name参数，然后又定义了自己的属性age。此外，SubType.prototype也被赋值为SuperType的实例。原型赋值之后，又在这个原型上添加了新方法sayAge()。这样，就可以创建两个SubType实例，让这两个实例都有自己的属性，包括colors，同时还共享相同的方法。

4.原型式继承

是即使不自定义类型也可以通过原型实现对象之间的信息共享。

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

这个 object()函数会创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返
回这个临时类型的一个实例。本质上，object()是对传入的对象执行了一次浅拷贝。

let person={
  name:"Tom",
  friends:["Jerry","Van","Spike"]
};
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); //[ 'Jerry', 'Van', 'Spike', 'Rob', 'Barbie' ]

适用情况：你有一个对象，想在它的基础上再创建一个新对象。你需要把这个对象先传给 object()，然后再对返回的对象进行适当修改。
在这个例子中，person 对象定义了另一个对象也应该共享的信息，把它传给 object()之后会返回一个新对象。这个新对象的原型是 person，意味着它的原型上既有原始值属性又有引用值属性。这也意味着person.friends不仅是person 的属性，也会跟 anotherPerson 和 yetAnotherPerson 共享。这里实际上克隆了两个 person。

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

let anotherPerson=Object.create(person);
let yetAnotherPerson=Object.create(person);

Object.create()的第二个参数与Object.defineProperties()的第二个参数一样：每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。
比如：

let person={
  name:"Tom",
  friends:["Jerry","Van","Spike"]
};
let anotherPerson=Object.create(person,{
  name:{
    value:"Greg"
  }
})
console.log(anotherPerson.name); //Greg

原型式继承非常适合不需要单独创建构造函数，但仍需要在对象间共享信息的场合。但是，属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的。

5.寄生式继承

与原型式继承比较接近的一种继承方式是寄生式继承。思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function object(o) { 
  function F() {} 
  F.prototype = o; 
  return new F(); 
 }
 
function createAnother(original){
  let clone=object(original); //通过调用函数创建一个新对象
  clone.sayHi=function(){ //以某种方式增强这个对象
    console.log("hi");
  }
  return clone; //返回这个对象
}

在这段代码中，createAnother()函数接收一个参数，就是新对象的基准对象。这个对象original会被传给object()函数，然后将返回的新对象赋值给clone。接着给clone对象添加一个新方法sayHi()。最后返回这个对象。可以像下面这样使用createAnother()函数：

let person={
  name:"Tom",
  friends:["Jerry","Van","Spike"]
}
let anotherPerson=createAnother(person);
anotherPerson.sayHi(); //hi

这个例子基于person对象返回了一个新对象。新返回的anotherPerson对象具有person的所有属性和方法，还有一个新方法sayHi()。
寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。object()函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。
注意：通过寄生式继承给对象添加函数会导致函数难以重用，与构造函数模式类似。

6.寄生式组合继承

6.1 组合继承缺点

组合继承其实也存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。本质上，子类原型最终是要包含超类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行了。
再来看一看这个组合继承的例子：

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); // 第二次调用 SuperType() 
 this.age = age; 
} 
SubType.prototype = new SuperType(); // 第一次调用 SuperType() 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function() { 
 console.log(this.age); 
};

在上面的代码执行后，SubType.prototype上会有两个属性：name 和 colors。它们都是 SuperType 的实例属性，但现在成为了 SubType 的原型属性。在调用 SubType 构造函数时，也会调用 SuperType 构造函数，这一次会在新对象上创建实例属性name 和 colors。这两个实例属性会遮蔽原型上同名的属性。

6.2 寄生式组合继承实现

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。
基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。说到底就是使用寄生式继承来继承父
类原型，然后将返回的新对象赋值给子类原型。

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

这个 inheritPrototype()函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数：子类构造函数和父类构造函数。在这个函数内部，第一步是创建父类原型的一个副本。然后，给返回的prototype 对象设置constructor 属性，解决由于重写原型导致默认 constructor丢失的问题。最后将新创建的对象赋值给子类型的原型。

如下例所示，调用 inheritPrototype()就可以实现前面例子中的子类型原型赋值：

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); 
};

这里只调用了一次 SuperType 构造函数，避免了 SubType.prototype上不必要也用不到的属性，因此可以说这个例子的效率更高。而且，原型链仍然保持不变，因此instanceof 操作符和isPrototypeOf()方法正常有效。
寄生式组合继承可以算是引用类型继承的最佳模式。