摘要：繼承和前面兩篇文章中的知識非常相關(guān)，如果對函數(shù)創(chuàng)建原理和原型鏈不熟悉，請猛戳高級程序設(shè)計筆記創(chuàng)建對象高級程序設(shè)計筆記原型圖解繼承，通俗的說，就是將自身不存在的屬性或方法，通過某種方式為自己所用文章分別介紹原型鏈繼承繼承借用構(gòu)造函數(shù)繼承組合繼

繼承和前面兩篇文章中的知識非常相關(guān)，如果對函數(shù)創(chuàng)建原理和原型鏈不熟悉，請猛戳：
《javascript高級程序設(shè)計》筆記：創(chuàng)建對象
《javascript高級程序設(shè)計》筆記：原型圖解

繼承，通俗的說，就是將自身不存在的屬性或方法，通過某種方式為自己所用

文章分別介紹原型鏈繼承、call/apply繼承（借用構(gòu)造函數(shù)繼承）、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承

核心：將父類的實(shí)例作為子類的原型

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

function SubType(){
  this.subproperty = false;
}
// 繼承自SuperType
SubType.prototype = new SuperType();

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

var instance = new SubType();
alert(instance.getSuperValue());//true

簡單的原型鏈分析

在《javascript高級程序設(shè)計》筆記：創(chuàng)建對象 的文章中，使用原型創(chuàng)建對象會存在多個實(shí)例對引用類型的操作會被篡改的問題，在上面同樣存在這個問題，如下：

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"

兩個實(shí)例對象instance1和instance2的colors屬性指向相同，改變一個會影響另一個實(shí)例的屬性

缺陷：
（1）原型鏈繼承多個實(shí)例的引用類型屬性指向相同，存在篡改的可能
（2）不能傳遞參數(shù)

核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例，等同于復(fù)制父類的實(shí)例給子類（不使用原型）

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

function SubType(name, age){
  // 繼承自SuperType
  SuperType.call(this, name);
  
  this.age = age;
}

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

var instance2 = new SubType();
alert(instance2.colors);    //"red,blue,green"

alert(instance1.name); // "Nicholas"
alert(instance1.age); // 29

借用構(gòu)造函數(shù)繼承的核心就在于SuperType.call(this, name)，“借調(diào)”了SuperType構(gòu)造函數(shù)，這樣，SubType的每個實(shí)例都會將SuperType中的屬性復(fù)制一份

缺陷：
（1）只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法
（2）無法實(shí)現(xiàn)復(fù)用，每個子類都有父類實(shí)例函數(shù)的副本，影響性能

核心：結(jié)合原型鏈繼承和構(gòu)造函數(shù)繼承通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用

其背后的思路是使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承，這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又能保證每個實(shí)例都有它自己的屬性

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("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

圖解：

缺陷：
父類中的實(shí)例屬性和方法既存在于子類的實(shí)例中，又存在于子類的原型中，不過僅是內(nèi)存占用，因此，在使用子類創(chuàng)建實(shí)例對象時，其原型中會存在兩份相同的屬性/方法

這個方法是javascript中最常用的繼承模式

核心：直接將某個對象直接賦值給構(gòu)造函數(shù)的原型

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

object()對傳入其中的對象執(zhí)行了一次淺復(fù)制，將F的原型直接指向傳入的對象

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

缺點(diǎn)：
（1）原型鏈繼承多個實(shí)例的引用類型屬性指向相同，存在篡改的可能
（2）無法傳遞參數(shù)

另外，ES5中存在Object.create()的方法，能夠代替上面的object方法

核心：在原型式繼承的基礎(chǔ)上，增強(qiáng)對象，返回構(gòu)造函數(shù)

function createAnother(original){ 
  varclone=object(original); // 過調(diào)用函數(shù)創(chuàng)建一個新對象
  clone.sayHi = function(){ // 以某種方式增強(qiáng)這個對象
    alert("hi");
  };
  return clone; // 返回對象
}

函數(shù)的主要作用是為構(gòu)造函數(shù)新增屬性和方法，以增強(qiáng)函數(shù)

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

缺點(diǎn)：
（1）原型鏈繼承多個實(shí)例的引用類型屬性指向相同，存在篡改的可能
（2）無法傳遞參數(shù)

核心：結(jié)合借用構(gòu)造函數(shù)傳遞參數(shù)和寄生模式實(shí)現(xiàn)繼承

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //創(chuàng)建對象
  prototype.constructor = subType;                    // 增強(qiáng)對象
  subType.prototype = prototype;                      // 指定對象
}

// 父類初始化實(shí)例屬性和原型屬性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用構(gòu)造函數(shù)傳遞增強(qiáng)子類實(shí)例屬性（支持傳參和避免篡改）
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 將父類原型指向子類
inheritPrototype(SubType, SuperType);

// 新增子類原型屬性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var instance1 = new SubType("xyc", 23);
var instance2 = new SubType("lxy", 23);

instance1.colors.push("2"); // ["red", "blue", "green", "2"]
instance1.colors.push("3"); // ["red", "blue", "green", "3"]

圖解：

寄生組合繼承集合了前面幾種繼承優(yōu)點(diǎn)，幾乎避免了上面繼承方式的所有缺陷，是執(zhí)行效率最高也是應(yīng)用面最廣的，就是實(shí)現(xiàn)的過程相對繁瑣

參考：
JS繼承的實(shí)現(xiàn)方式
面向?qū)ο蟮某绦蛟O(shè)計之繼承
MDN——Object.create()