详细理解JS中的继承

正式说继承之前，有两个相关小点：

1. JS只支持实现继承，即继承实际的方法，不支持接口继承（即继承方法的签名，但JS中函数没签名）
2. 所有对象都继承了Object.prototype上的属性和方法。

• 说继承之前还要再说一下原型。原型之所以很重要，原因之一就是可以利用它来实现JavaScript的继承。重写一个函数的原型对象，将其指定为另一个函数的实例，这样便实现了一个简单的原型链继承。

看一个利用原型链来实现继承的基础例子：

 

function Super(){
    this.name='super';
}
Super.prototype.getName=function(){
    console.log(this.name);
}
function Sub(){
    this.name='sub';
}
 
Sub.prototype=new Super();//重写原型，实现继承
var instance=new Sub();
instance.getName();//sub继承了getName方法

重写原型会让Sub的原型获得Super构造函数上和Super原型上的所有属性和方法； 但是这样单纯使用原型来继承也有问题，比如将上面的代码修改一下，在原型上添加一个引用类型的属性：

 
function Super() {
    this.name='super';
}
Super.prototype.getName=function() {
    console.log(this.name);
};
Super.prototype.color = ["red", "black"];

function Sub() {   
}

Sub.prototype=new Super();//实现继承

var instance=new Sub();
instance.color.push('white');//改变instance的color属性，push一个新的项
var ins = new Sub();
console.log(ins.color); //["red", "black", "white"]  可以看到ins的color属性也被改变了

可以看到在instance中修改color属性，但是在另一个实例ins中这个修改也被反映出来了，这就是一个问题。

• ①  借用构造函数（又叫经典继承，伪造对象）

如果将属性和方法都写在原型上，利用其共享性来实现继承理论上没有问题，但是原型链的继承共享性固然好，可一个问题就出在其共享性上，对于引用类型的值，当在一个实例上修改了引用类型值之后，其他共享该引用类型的所有实例都随之改变了，如下：

function Arr(){
}
Arr.prototype.array=['red','black'];
arr01=new Arr();
arr02=new Arr();
arr01.array.push('white');
console.log(arr02.array);//["red", "black", "white"] 

综上所以一般很少单独使用原型链，于是就有了借用构造函数这种思维，虽然这种做法也有一定的局限，如下： 

function superType(){
    this.color=['red','blue','yellow'];
}
function subType(){
    //继承了superType
    superType.call(this);
}

var instance01=new subType();
instance01.color.push('black');
console.log(instance01.color);//['red','blue','yellow','black']

var instance02=new subType();
console.log(instance02.color);//['red','blue','yellow']

借用构造函数这种方法主要就是：利用parent . call(this)来继承父级构造函数上公有的属性，且在一个实例上进行修改不会对其他实例造成影响；[ 注意：使用call这种不能继承原型上属性和方法的哦 ]

当然，如果上面的例子中superType（）有参数的话，在subType函数内部调用时也可以为其传递参数：superType . call(this,parameter);

 

• ②  下面来说JS中最常用的继承模式：组合继承

function superType(name){
    this.name=name;
    this.color=['red','blue','yellow'];
}
superType.prototype.sayName=function(){
    console.log(this.name);
}

function subType(name,age){
    //继承superType的属性
    superType.call(this,name);
    this.age=age;
}
//继承superType的方法
subType.prototype=new superType();
subType.prototype.constructor=subType;
subType.prototype.sayAge=function(){
    console.log(this.age);
};

var instance01=new subType('lazy',20);
instance01.color.push('black');
console.log(instance01.color);//['red','blue','yellow','black']
instance01.sayAge();//20
instance01.sayName();//lazy

var instance02=new subType('chen',21);
console.log(instance02.color);//['red','blue','yellow']
instance02.sayAge();//21
instance02.sayName();//chen

 

这种方法就是既利用了call（）来继承构造函数中公有的属性，同时又利用原型来继承原型对象上的属性和方法；这样让subType的实例既可以分别拥有各自独立的属性，也可以共用相同的方法了。

 

JS中用得做多的继承是组合式继承，而组合式继承最大的问题就是每次new一个subType的实例时，都会两次调用父级构造函数superType；

第一次是在重写subType的原型  ： subType.prototype = new superType()  的时候。这一次调用让subType获得了superType构造函数上和原型对象上的属性和方法，且这些属性和方法是加在subType的原型对象中的；

第二次是在function subType(){

       　　　　superType.call(this,name);

　　　　　 }

的时候，这一次在调用call方式时只获得了superType构造函数上的属性。注意这一次是在调用subtype构造函数创建subtype的实例，所以这次获得的属性方法是加在subType的实例中的，且这些实例中的属性其实会覆盖前面原型中同名的属性；

这样算起来每new一个subType的实例，就会两次调用superType。虽然这样两次下来就完全包含了superType的全部实例属性和方法，但执行了两次superType效率不算高。所以我们再来看另一个方法：

• ③  寄生组合式继承

这种方法可以解决两次调用superType的情况，实际上 思路跟组合式继承是一样的；

function superType(name){
    this.name=name;
    this.color=['red','blue','yellow'];
}
superType.prototype.sayName=function(){
    console.log(this.name);
}

function subType(name,age){
    //继承superType
    superType.call(this,name);
    this.age=age;
}

function inheritPrototype(sub,sup){
    //创建超类型构造函数的原型副本
    var prototype=Object(sup.prototype);
    //为其指定构造函数，增强对象
    prototype.constructor=sub;
    //重写sub的原型对象
    sub.prototype=prototype;
}

//copy一份超类型构造函数的原型对象给子类型构造函数
inheritPrototype(subType,superType);

subType.prototype.sayAge=function(){
    console.log(this.age);
};

var instance01=new subType('lazy',20);
instance01.color.push('black');
console.log(instance01.color);//['red','blue','yellow','black']
instance01.sayAge();//20
instance01.sayName();//lazy

var instance02=new subType('chen',21);
console.log(instance02.color);//['red','blue','yellow']
instance02.sayAge();//21
instance02.sayName();//chen

这种方法主要依然是利用   借用构造函数的方法来继承构造函数的属性，利用原型链的混合方法来继承方法；基本思路是：不必为了重写subType的原型而去调用一次superType，因为我们需要的也只是superType的原型对象的一个副本而已，所以有了inheritPrototype函数：

function inheritPrototype ( sub ,super) {
     var   prototype = Object( super.prototype );   //创建副本
     sub.prototype = prototype ;
     prototype . constructor = sub ;
}

相比组合式继承这种方法高效率的地方就在于它只调用了一次superType构造函数；

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

function createAnother(original) {
    var clone = Object(original);
    clone.sayHi = function () {
        console.log('hi');
    };
    return clone;
}

var person = {
    name: 'lazy',
    friends:[1,2,3]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();
console.log(anotherPerson.name);

这个例子中，基于person对象创建了一个新的对象anotherPerson，这个新的对象不仅具有person的所有属性和方法，而且还有自己的sayHi方法；

 

菜鸟小白一枚，可能上述有错误或理解不对的地方，恳请指出~~谢谢！