JavaScript如何实现继承

1.原型链继承

function Parent () {this.name = 'aa';}
 
Parent.prototype.getName = function () {
 
    console.log(this.name);
 
}
 
function Child () {}
 
Child.prototype = new Parent();
 
var child = new Child();
 
console.log(child.getName()) // aa
特点：

非常纯粹的继承关系，实例是子类的实例，也是父类的实例
父类新增原型方法/原型属性，子类都能访问到
简单，易于实现
缺点：

要想为子类新增属性和方法，必须要在new Child()这样的语句之后执行，不能放到构造器中
无法实现多继承
来自原型对象的引用属性被所有实例共享
创建子类实例时，无法向父类构造函数传参
2.构造函数继承 

    function a2() {this.color=[1,2,3,4];  }
 
    function b2() {a2.call(this);  }
 
 
    var instance2=new b2();
 
    instance2.color.push(5);
 
    console.log(instance2.color);//[1, 2, 3, 4, 5]
 
 
    var instance3=new b2();
 
    console.log(instance3.color);//[1, 2, 3, 4]
 
    //上面两个例子主要想指出，instance2对构造函数的数组做修改是不会影响到其他的实例，
    //因为它改的是属于它自己的那一份，不像原型那样大家共享
 
 
    //------------------------//
 
 
    function a3(name) { this.name=name; }
 
 
    function b3() {a3.call(this,"ww");this.age=29;  }
 
 
    var instance4=new b3();
 
    console.log(instance4.name);//ww
 
    console.log(instance4.age);//29
 
    //这个例子说明构造函数继承可以传参数
特点：

解决了原型链继承中，子类实例共享父类引用属性的问题
创建子类实例时，可以向父类传递参数
可以实现多继承（call多个父类对象）
缺点：

实例并不是父类的实例，只是子类的实例
只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
3.组合继承

    function a4(name) {this.name=name;this.color=[1,2,3,4];  }
 
    a4.prototype.sayName=function(){console.log(this.name);}
 
 
    function b4(name,age) { a4.call(this,name);this.age=age; }
 
    b4.prototype=new a4();
 
    b4.prototype.constructor=b4;
 
    b4.prototype.sayAge=function(){console.log(this.age);}
 
 
    var instance5=new b4("aa",12);
 
    instance5.color.push(5);
 
    console.log(instance5.color);//[1, 2, 3, 4, 5]
 
    instance5.sayAge();//12
 
    instance5.sayName();//aa
 
 
    var instance6=new b4("bb",22);
 
    console.log(instance6.color);//[1, 2, 3, 4]
 
    instance6.sayName();//bb
 
    instance6.sayAge()//22
 
 
    var instance5=new a4("aa");
 
    instance5.sayAge();// not  a  function
    //这个输出说明b4.prototype=new a4(),然后b4.prototype.sayAge增加了prototype的方法，但是 
    //增加的方法并没有增加到a4上面
特点：

弥补了构造继承的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
既是子类的实例，也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4.原型式继承

    function object(o){
 
        function F(){};
 
        F.prototype=o;
 
        return new F();
 
    }
 
 
    var person={name:"wwwwwww",age:[1,2,3]};
 
 
    var anp=object(person);
 
    anp.name="er";
 
    anp.age.push(99);
 
 
    var ynp=object(person);
 
    ynp.name="ll";
 
    ynp.age.push(100);
 
 
    console.log(person.age);//[1, 2, 3, 99, 100]
    //输出结果说明属性共享这一问题
 
 
    //----------------//
 
    var person2={name:"wwwwwww",age:[1,2,3]};
 
 
    var anp=Object.create(person2);
 
    anp.name="er";
 
    anp.age.push(99);
 
 
    var ynp=Object.create(person2);
 
    ynp.name="ll";
 
    ynp.age.push(100);
 
 
    console.log(person2.age);//[1, 2, 3, 99, 100]
    //这里说明用create方法一样可以完成原型式继承
 

 缺点也是来自原型对象的引用属性被所有实例共享

  5.寄生式继承   

 function createAnother(original) {
 
        var clone=object(original);
 
        clone.sayHi=function(){  //扩充了方法
 
            console.log("hi");
 
        };
 
        return clone;
 
      }
 
 
      var per={name:"loud",age:[1,2,3]};
 
      var pp=createAnother(per);
 
      pp.sayHi();
缺点和构造函数继承一样，都是每次创建对象都会创建一遍方法，内存占用大

6.寄生组合式继承 

   function inheritPrototype(b5,a5) {
 
        var prototype=object(a5.prototype);
 
        prototype.constructor=b5;
 
        b5.prototype=prototype;
 
     }
 
 
     function a5(name) {
 
         this.name=name;
 
         this.color=[1,2,3];
 
     }
 
 
     a5.prototype.sayName=function(){
 
         console.log(this.name);
 
     }
 
 
     function b5(name,age) {
 
         a5.call(this,name);
 
         this.age=age;
 
    }
 
 
    inheritPrototype(b5,a5);
 
 
    b5.prototype.sayAge=function(){
 
       console.log(this.age);
 
    }
 
 
    var instance7=new b5("dd",99);
 
    instance7.sayName();
原型链大概是这样：其实寄生组合继承我觉得可以理解为组合继承的改进，和组合继承相比，避免了new a5()的写法，同时又保持了原型继承关系



特点：

只调用了一次构造函数，并且避免了在 prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

缺点：代码比较复杂

虽然在ES6中有了继承，使用extends关键字就能实现。本篇讲的不是这种，而是ES6之前的几种实现继承的方式。

一、原型链
ECMAScript中将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。（不理解原型链的童鞋们可以翻阅一下我之前的博客，里面有详细的说明）

实现原型链的一种基本模式

function SuperType(){
      this.property=true;
}
SuperType.prototype.getSuperValue=function(){
      return this.property;
}
function SubType(){
      this.subproperty=false;
}
//通过创建SuperType的实例继承了SuperType
SubType.prototype=new SuperType();

SubType.prototype.getSubValue=function(){
      return this.subproperty;
}
var instance=new SubType();
alert(instance.getSuperValue());  //true
上面的例子中，instance指向SubType的原型，SubType的原型又指向SuperType的原型。getSuperValue()方法仍然还在SuperType.prototype中，但property则位于SubType.prototype中。这是因为prototype是一个实例属性，而getSuperValue()则是一个原型方法。

注意：原型链虽然很强大，可以实现继承，但存在两个主要的问题。

（1）包含引用类型值的原型属性会被所有实例共享，这会导致对一个实例的修改会影响另一个实例。

（2）在创建子类型的实例时，不能向超类型的构造函数中传递参数。由于这两个问题的存在，实践中很少单独使用原型链。
以下例子清楚的说明了第一个问题

function SuperType(){
      this.colors=["red", "blue", "green"];
}
function SubType(){
}
//继承了SuperType
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
二、借用构造函数
1、对象冒充
        function SuperType(username){
            this.username = username;
            this.hello = function(){
                alert(this.username);
            }
        }
        function SubType(username,password){
            //通过以下3行实现将SuperType的属性和方法追加到SubType中，从而实现继承
            //第一步：this.method是作为一个临时的属性，并且指向SuperType所指向的对象，
            //第二步：执行this.method方法，即执行SuperType所指向的对象函数
            //第三步：销毁this.method属性，即此时SubType就已经拥有了SuperType的所有属性和方法
            this.method = SuperType;
            this.method(username);//最关键的一行
            delete this.method;
            this.password = password;
            this.world = function(){
                alert(this.password);
            }
        }
        var superType = new SuperType("haha");
        var subType = new SubType("heihei","123456");
        superType.hello();
        subType.hello();
        subType.world();
2、apply或call方法
在解决原型中包含引用类型值所带来的问题中，使用借用构造函数技术来解决。借用构造函数的基本思想，即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法可以在新创建的对象上执行构造函数。如下例子

function SuperType(){
      this.colors=["red", "blue", "green"];
}
function SubType(){
      //继承SuperType
      SuperType.call(this);
}
var instance1=new SubType();
instance1.colors.push("black");
alert(instance1.colors);  //red,bllue,green,black

var instance2=new SubType();
alert(instance2.colors);  //red,blue,green
上面例子中，通过使用call()方法（或者apply()方法），在新创建的SubType实例的环境下调用了SuperType构造函数。这样一来就会在新的SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果，SubType的每个实例都会有自己的colors属性副本。

相对于原型链而言，借用构造函数可以在子类型构造函数中向超类型构造函数传递参数。如下例子

function SuperType(name){
      this.name=name;
}
function SubType(){
      //继承了SuperType,同时还传递了参数
      SuperType.call(this,"mali");
      //实例属性
      this.age=22;
}
var instance=new SubType();
alert(instance.name);  //mary
alert(instance.age);  //29
借用构造函数存在两个问题：

（1）无法避免构造函数模式存在的问题，方法都在构造函数中定义，因此无法复用函数。
（2）在超类型的原型中定义的方法，对子类型而言是不可见的。因此这种技术很少单独使用。
三、组合继承
组合继承，指的是将原型链和借用构造函数的技术组合到一起。思路是使用原型链实现对原型方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。以下例子充分说明了这一点

function SuperType(name){
      this.name=name;
      this.colors=["red", "blue", "green"];
}
SuperType.prototype.sayName=function(){
      alert(this.name);
};
function SubType(name, age){
      //继承属性    使用借用构造函数实现对实例属性的继承
      SuperType.call(this,name);
      this.age=age;
}
//继承方法     使用原型链实现
SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;
SubType.prototype.sayAge=function(){
      alert(this.age);
};
var instance1=new SubType("mali", 22);
instance1.colors.push("black");
alert(instance1.colors);   //red,blue,green,black
instance1.sayName();  //mary
instance1.sayAge();  //22

var instance2=new SubType("greg", 25);
alert(instance2.colors);   //red,blue,green
instance2.sayName();  //greg
instance2.sayAge();  //25
这个例子中，两个实例既分别拥有自己的属性，包括colors属性，又可以使用相同的方法。

组合继承避免了原型链和借用构造函数的缺点，融合了他们的优点，是JavaScript中最常用的继承模式。