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

寄生組合式繼承

寄生組合式繼承，就是通過(guò)偽造對(duì)象來(lái)繼承屬性，通過(guò)原型鏈的混成形式來(lái)繼承方法。

這種技術(shù)的基本思路是：不必為了指定子類型的原型而調(diào)用超類型的構(gòu)造函數(shù)，因?yàn)槲覀兯枰闹皇浅愋驮偷囊粋€(gè)副本而已(這一點(diǎn)正是組合繼承的問(wèn)題，并且正是JavaScript這種原型式語(yǔ)言的強(qiáng)大之處，直接copy對(duì)象-原型對(duì)象)。本質(zhì)上，就是使用寄生式繼承來(lái)繼承超類型的原型，然后再將結(jié)果指定給子類型的原型。

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //創(chuàng)建超類型原型副本
  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);
  //實(shí)例屬性
  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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

這個(gè)是寄生組合式繼承的最簡(jiǎn)單形式。這個(gè)函數(shù)接收兩個(gè)參數(shù)：

1. 子類型構(gòu)造函數(shù)
2. 超類型構(gòu)造函數(shù)

在函數(shù)內(nèi)部，寄生組合式繼承最簡(jiǎn)形式分為3個(gè)步驟：

1. 創(chuàng)建超類型原型副本；
2. 為創(chuàng)建的副本指定constructor屬性，從而彌補(bǔ)因?yàn)橹貙?xiě)SubType原型而失去的默認(rèn)的constructor屬性，這個(gè)原型副本的constructor屬性變化：SuperType –> SubType；
3. 將該完善好的副本賦值給子類型的原型。

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

寄生組合式繼承的高效率體現(xiàn)在它只調(diào)用了一次SuperType構(gòu)造函數(shù)，并且因此避免了在SubType.prototype上面創(chuàng)建不必要的，多余的屬性。與此同時(shí)，原型鏈還能保持不變。

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論