JavaScript寄生組合式繼承原理與用法分析

本文實例講述了JavaScript寄生組合式繼承。分享給大家供大家參考，具體如下：

寄生組合式繼承

寄生組合式繼承，就是通過偽造對象來繼承屬性，通過原型鏈的混成形式來繼承方法。

這種技術的基本思路是：不必為了指定子類型的原型而調用超類型的構造函數，因為我們所需要的只是超類型原型的一個副本而已(這一點正是組合繼承的問題，并且正是JavaScript這種原型式語言的強大之處，直接copy對象-原型對象)。本質上，就是使用寄生式繼承來繼承超類型的原型，然后再將結果指定給子類型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //創建超類型原型副本
  prototype.constructor = subType;          //修改原型副本的不同屬性
  subType.prototype = prototype;           //指定原型
}
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  console.log(this.name);
}
function SubType(name, age){
  //繼承屬性
  SuperType.call(this, name);
  //實例屬性
  this.age = age;
}
//繼承方法
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
  console.log(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors); //"red, blue, green, black"
instance1.sayName();      //"Nicholas"
instance1.sayAge();      //29

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：

這個是寄生組合式繼承的最簡單形式。這個函數接收兩個參數：

1. 子類型構造函數
2. 超類型構造函數

在函數內部，寄生組合式繼承最簡形式分為3個步驟：

1. 創建超類型原型副本；
2. 為創建的副本指定constructor屬性，從而彌補因為重寫SubType原型而失去的默認的constructor屬性，這個原型副本的constructor屬性變化：SuperType –> SubType；
3. 將該完善好的副本賦值給子類型的原型。

寄生組合式繼承的圖解如下：

寄生組合式繼承的高效率體現在它只調用了一次SuperType構造函數，并且因此避免了在SubType.prototype上面創建不必要的，多余的屬性。與此同時，原型鏈還能保持不變。

更多關于JavaScript相關內容還可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。