【js】实现继承的6种方法

1.原型链

基本思想：利用原型链让一个引用类型继承另一个引用类型的属性和方法。 让原型对象(B.prototype)等于另一个类型的实例(new A()), 即B.prototype = new A() ，则B继承了A

构造函数、原型、实例的关系：

· 每个构造函数（function A）都有一个原型对象（A.prototype）；

· 这个原型对象都包含一个指向构造函数的指针（A.prototype.constructor = A）；

· 而实例都包含一个纸箱原型对象的内部指针（instance._proto_ = A.prototype）；

例：

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
    return this.subproperty;
}

//重写父类的方法
SubType.prototype.getSuperValue = function(){
    return false；
}

var instance = new SubType();
var instance1 = new SuperType();
alert(instance.getSuperValue()); //false 调用重写的方法
alert(instance1.getSuperValue()); //true 父类的实例调用的还是原来的方法

缺点1

包含引用类型值（object,array,function）的原型属性会被所有实例共享。例：

function SuperType(){
    this.colors = ['red','blue','green'];
}

function SubType(){
}

SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black

var instance2 = new SubType();
alert(instance2.colors); //red,blue,green,black 《---!!!

var superinstance = new SuperType();
alert(superinstance.colors); //red,blue,green

SuperType的每一个实例都会有各自包含自己数组的colors属性。当SubType通过原型链继承了SuperType后，SubType.prototype就变成了SuperType的一个实例，因此它也有一个自己的colors属性（相当于SubType.prototype.colors），这个colors属性是在SubType的原型上，所以会被SubType的实例共享，所以instance1改变了这个值的时候，instance2的colors属性也跟着改变了。

缺点2

在创建子类型的实例时，不能向父类的构造函数中传递参数。（实际上是没有办法在不影响所有对象实例的情况下，给父类的构造函数传递参数）。

鉴于以上这两个问题，在实践中很少会单独使用原型链。

2.借用构造函数（apply() 或 call()）

基本思想：在子类型构造函数的内部调用父类型构造函数。

function SuperType(){
    this.colors = ['red','blue','green'];
}

function SubType(){
    SuperType.call(this);   //改变SuperType中的this的指向，改为SubType
}

var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black

var instance2 = new SubType();
alert(instance2.colors); //red,blue,green 因为colors并不是prototype上的引用类型的属性，所以没有被共享

var superinstance = new SuperType();
alert(superinstance.colors); //red,blue,green

通过call方法，实际上是在SubType实例的环境中调用了SuperType构造函数，使得SubType对象上执行SuperType()函数中定义的所有对象初始化代码，所以SubType的每个实例都会有自己的colors属性的副本。

优点：

可以在子类型构造函数中向父类型构造函数传递参数。例：

function SuperType(name){
    this.name = name;
}

function SubType(){
    SuperType.call(this,'lee');

    //实例属性
    this.age = 22;
}

var instance = new SubType();
alert(instance.name); //lee
alert(instance.age); //22

因为是每个实例都各自调用SuperType中的构造函数进行初始化，所以不会传递参数不会互相影响。

缺点：

1.构造函数模式的问题：方法都在构造函数中定义，无法进行函数的复用。

2.在父类型中定义的方法，对子类型而言是不可见的，会导致所有类型都只能使用构造函数模式。

鉴于以上这两个问题，在实践中也很少单独使用借用构造函数的方法。

3.组合式继承（原型链 + 借用构造函数）

基本思想：使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样既可以通过在原型上定义方法实现函数复用，又能保证每个实例否有自己的属性。

function SuperType(name){
    this.name = name;
    this.colors = ['red','blue','green'];
}

SuperType.ptototype.getName = function(){
    alert(this.name);
}

function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType; //弥补因上面修改了prototype而失去的默认constructor属性，这句语句改正前，constructor的值被改为了SuperType
SubType.prototype.getAge = function(){
    alert(this.age);
}

var instance1 = new SubType('lee',22);
instance1.colors.push('black');
alert(instance1.colors); //red,blue,green,black
instance1.getName(); //lee
instance1.getAge(); //22

var instance2 = new SubType('mone',23);
alert(instance2.colors); //red,blue,green
instance2.getName(); //mone
instance2.getAge(); //23

自问自答：

问：为什么结合了两种继承方法后，不必再担心原型的共享属性，明明还是有用原型继承的方法（SubType.prototype = new SuperType();）？

答：这里SubType.prototype在new SuperType()之后仍然会使SubType的实例有共享的colors，但是在调用了call来继承属性时，已经等同于给每个实例都赋予了一个局部变量的colors，当我们修改和显示实例colors时，先查找了局部的colors，此时该变量存在，就修改和输出，不会再去查找和修改原型链上共享的colors，所以每个实例对colors的修改不会影响其他实例。

缺点：

无论在什么情况下，都会调用两次父类的构造函数。

（1.SuperType.call(this,name); 2.SubType.prototype = new SuperType();）

子类型最终会含有父类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。

4.原型式继承 （适用于对象，非函数式）

基本思想：原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型（SuperType）。从本质上，是通过对已有对象进行浅复制来实现继承。

核心函数：

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

var person = {
    name:'lee',
    friends:['a','b','c']
}

var personA = object(person);
personA.name = 'nakai'; //nakai
personA.friends.push('d'); //a,b,c,d
console.log(person.friends); //a,b,c,d

var personB = object(person);
personB.name = 'kimura'; //kimura
personB.friends.push('e'); //a,b,c,d,e
console.log(person.friends); //a,b,c,d,e
console.log(personA.friends); //a,b,c,d,e

ES5通过新增Object.create()方法规范了原型式继承。

var personA = Object.create(person);

var personB = Object.create(person);

在不必兴师动众地创建构造函数，而只想让一个对象与另一个对象保持类似的情况下，原型式继承是完全可以胜任的。

缺点：

包含引用类型值得属性始终都会共享相应的值，就像使用原型模式一样。

5.寄生式继承 （适用于对象，非函数式）

基本思想：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回该对象。

function createAnother(original){
    //通过调用函数创建一个新对象 ，这里的object是原型式继承的核心函数.
    //但是其实任何能够返回新对象的函数都可以。
    var clone = object(original);
    clone.sayHi = function(){
        alert('hi');
    }
    return clone;
}

//使用
var person = {
    name:'lee',
    friends:['a','b','c']
}

var newPerson = createAnother(person);
newPerson.sayHi(); //hi

基于person返回了一个新对象——newPerson,新对象不仅具有person的所有属性和方法，而且还有自己的sayHi()方法。

在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。

6.寄生组合式继承 （借用构造函数 + 寄生式继承 + 原型链）

基本思想：不必为了指定子类型的原型而调用父类型的构造函数（SubType.prototype = new SuperType();），我们所需要的其实就只是父类型原型的一个副本而已。本质上，就是使用寄生式继承来继承父类型的原型，然后将结果指定给子类型的原型。

核心函数：

//创建一个SuperType.prototype的副本，并赋值给SubType.prototype。代替调用SuperType的构造函数
function inheritPrototype(SubType,SuperType){
    var prototype = Object(SuperType.prototype);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.colors = ['red','blue','green'];
}

SuperType.ptototype.getName = function(){
    alert(this.name);
}

function SubType(name,age){
    //继承属性
    SuperType.call(this,name);
    this.age = age;
}

inheritPrototype(SubType,SuperType);  //《--!!!

SubType.prototype.getAge = function(){
    alert(this.age)
}

此时，因为没有了SubType.prototype = new SuperType();所以SubType的实例都没有了共享属性colors。

优点：

高效，只调用一次SuperType构造函数，（改良了组合式继承要无论什么情况都要调用两次SuperType的构造函数），并且因此避免了在SubType.prototype上面创建不必要、多余的属性，与此同时，原型链保持不变。可以说，寄生组合式继承是引用类型最理想的继承范式。（如上面的例子，引用类型值colors不再被实例共享）