详细理解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();//
 instance01.sayName();//lazy

 var instance02=new subType('chen',21);
 console.log(instance02.color);//['red','blue','yellow']
 instance02.sayAge();//
 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();//
 instance01.sayName();//lazy

 var instance02=new subType('chen',21);
 console.log(instance02.color);//['red','blue','yellow']
 instance02.sayAge();//
 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方法；

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