深入理解javascript之继承

继承是面向对象编程的一个基础。javascript中的继承，主要是通过原型链来实现的。

---

原型链继承

实现原型链继承的基本模式代码如下：

/** * @description： 原型继承基本模式 * @author:       刘放 * @date:         2015/10/26 15:52 */  function Father(){    this.name = "刘放";  }  Father.prototype.getName = function(){    return this.name;  }  function Son(){    this.Sonname = "小放";  }  //继承Father  Son.prototype = new Father();  Son.prototype.getSonName = function(){    return this.Sonname;  };  var f = new Son();  document.write(f.getName());  //刘放

其原理就是子类的原型指向了父类的原型，从而新实例化的对象拥有了父类的属性和方法。原型链一层一层往上搜索直到Object.prototype为止。关于原型的概念，这里就不再细说了，可以参考该文章：深入理解原型

接下来我们说说如何确定原型和实体的关系。第一种是使用instanceof操作符。

  //使用instanceof判断实例与原型的关系  document.write(f instanceof Object);//true  document.write(f instanceof Father);//true  document.write(f instanceof Son);//true

第二种是使用isPrototypeOf()方法，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型。

  //使用isPrototypeOf()方法判断实例与原型的关系  document.write(Object.prototype.isPrototypeOf(f));//true  document.write(Father.prototype.isPrototypeOf(f));//true  document.write(Son.prototype.isPrototypeOf(f));//true

原型链虽热很强大，但是也存在一些问题。在使用原型继承时，原型实际上会变成另一个类型的实例。于是，原来的实例属性也就顺理成章地变成了现在的原型属性了。

  //使用原型继承出现的一些问题，就是原型属性共享  function FatherB(){    this.age = [12,13,14];  }  function SonB(){  }  SonB.prototype = new FatherB();  var fB = new SonB();  fB.age.push(15);  document.write(fB.age);//12,13,14,15  //但是其他子类的属性也改变了  var fBB = new SonB();  document.write(fBB.age);//12,13,14,15

也就是说SonB的所有实例都会共享其属性。所以在实践中其实很少用到原型继承。

---

借用构造函数继承

为了解决原型链继承存在的共享属性问题。开发人员开始使用借用构造函数方式继承。实现就是在子类的内部调用父类的构造函数。在javascript中使用apply和call就可以改变作用域了，详细请看博文：call和apply

借用构造函数继承的基本模式如下：

/** * @description： 借用构造函数继承基本模式 * @author:       刘放 * @date:         2015/10/26 16:27 */ function FatherC(name){   this.name = name;   this.age = [12,13,14]; } function SonC(){   FatherC.call(this,"刘放"); } var fC = new SonC(); fC.age.push(15); document.write(fC.age);//12,13,14,15 var fCC = new SonC(); document.write(fCC.age);//12,13,14 document.write(fCC.name);//刘放

可以看到，age属性不再共享，而且我们还可以向父类提供参数。

但是这种方法同样存在一个问题，就是方法都在构造函数中定义，那么函数的复用性就降低了。所以这种方法也很少单独使用。

---

组合继承

组合继承是将原型链继承和借用构造函数继承的优点结合，是最常用的继承。其思路是使用原型链对原型属性和方法继承，而通过构造函数实现对实例属性的继承。这样既能保证复用性，也能保证每个实例都拥有自己的属性。

组合继承的基本模式如下：

/** * @description： 组合继承基本模式 * @author:       刘放 * @date:         2015/10/26 16:47 */  function FatherD(name){    this.name = name;    this.age = [12,13,14];  }  FatherD.prototype.sayName = function(){    document.write(this.name);  }  function SonD(name,sex){    FatherD.call(this,name);    this.sex = sex;  }  //继承方法  SonD.prototype = new FatherD();  SonD.prototype.constructor = SonD;  SonD.prototype.saySex = function(){    document.write(this.sex);  }  var fD = new SonD("刘放","男");  fD.age.push(15);  document.write(fD.age);//12,13,14,15  fD.sayName();//刘放  fD.saySex();//男  var fDD = new SonD("小放","女");  document.write(fDD.age);//12,13,14  fDD.sayName();//小放  fDD.saySex();//女

组合继承虽然常用，但是不代表它没有问题，它最大的问题就是无论什么情况下，都会调用两次父类构造函数：

FatherD.call(this,name);SonD.prototype = new FatherD();

---

寄生式继承

寄生式继承的思路和工厂模式类型，即创建一个用于封装继承过程的函数，该函数在内部以某种方法来增强对象，最后再像真是它做了所有工作一样返回对象。对工厂模式不熟悉的同学可以参考博文：设计模式

寄生式继承的基本模式如下：

/** * @description： 寄生式继承基本模式 * @author:       刘放 * @date:         2015/10/26 17:16 */  function createSon(original){    var clone = Object.create(original);    clone.sayHi = function(){      document.write("nihao");    };    return clone;  }  var FatherE = {    name:"刘放",    age:[12,13,14],  };  var SonE = createSon(FatherE);  SonE.sayHi();//nihao  document.write(SonE.name);//刘放  //任何能够返回新对象的函数都适用于此模式，但是由于不能做到函数复用所以降低了效率

任何能够返回新对象的函数都适用于此模式，但是由于不能做到函数复用所以降低了效率。

---

寄生组合式继承

刚才也提到了，组合继承最大的问题就是调用了两次父类的构造函数，而我们利用寄生式和组合结合就可以解决该问题。

所谓寄生组合式继承，就是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其基本思路是：不必为了指定子类型的原型而调用父类的构造函数，我们需要的其实就是父类原型的一个副本而已。本质上，就是使用寄生式继承来继承父类的原型，然后再将这些结果指定给子类的原型。

寄生组合式继承的基本模式如下：

/** * @description： 寄生组合式继承基本模式 * @author:       刘放 * @date:         2015/10/26 17:30 */  function Extends(son,father){    var prototype = Object.create(father.prototype);//创建对象    prototype.constructor = son;//增强对象    son.prototype = prototype;//指定对象  }  function FatherF(name){    this.name = name;    this.age = [12,13,14];  }  FatherF.prototype.sayName = function(){    document.write(this.name);  }  function SonF(name,sex){    this.name = name;    this.sex = sex;  }  //继承  Extends(SonF,FatherF);  SonF.prototype.saySex = function(){    document.write(this.sex);  }    var fF = new SonF("刘放","男");  fF.saySex();//男  fF.sayName();//刘放  //高效的只调用一次构造函数，最理想的继承方式。

寄生组合式继承解决了组合继承两次调用父类构造函数的弊端，也完成了继承所需的所有功能，是最理想的继承方式。

最后，完整代码：demo