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

其實《JavaScript高級程序設(shè)計》這本書中已經(jīng)有完整代碼了，只要把代碼讀懂就知道這個繼承是怎么回事。

首先，在js中，給對象定義屬性有兩種方式：

//通過執(zhí)行構(gòu)造函數(shù)設(shè)置屬性
function A(){
  this.a = 1;
}
//通過原型設(shè)置屬性
A.prototype.b = 1;

所以：

一個類Sub要繼承另一個類Super，需要繼承父類的prototype下的屬性，還要執(zhí)行一下父類的構(gòu)造函數(shù)。

即一個類Sub要繼承另一個類Super，既要通過原型鏈實現(xiàn)對原型屬性和方法的繼承，又要通過在子類構(gòu)造函數(shù)內(nèi)調(diào)用父類構(gòu)造函數(shù)實現(xiàn)對實例屬性的繼承。

1. 繼承prototype下的屬性

上面可以看到，Super類的prototype下的屬性是沒有被繼承的，因此下面還需要繼承這一部分。

直接「=」肯定不行，因為Sub.prototype中修改屬性后，不能影響Super.prototype里面的對象，即不能Sub.prototype=Super.prototype。

首先寫一個創(chuàng)建對象副本的方法

function object(o){
  function A(){}
  A.prototype = o
  var ox = new A()
  return ox
}

上面的函數(shù)得到的對象ox，擁有了對象o的全部屬性（在原型鏈上），而修改ox的屬性，不會影響到o，相當(dāng)于把o復(fù)制了一份。

原型式繼承就是上面的“object”函數(shù)，在很多類庫源碼中都能發(fā)現(xiàn)它的身影

簡單而言，原型式繼承就是不用實例化父類了，直接實例化一個臨時副本實現(xiàn)了相同的原型鏈繼承。（即子類的原型指向父類副本的實例從而實現(xiàn)原型共享）

tips:總所周知，原型鏈繼承是子類的原型指向父類的實例從而實現(xiàn)原型共享，而原型式繼承是子類的原型指向父類副本的實例從而實現(xiàn)原型共享。

ECMAScirpt 5通過新增Object.create()方法規(guī)范化了原型式繼承。

使用object方法，就可以將Super.prototype的屬性「復(fù)制」到Sub.prototype上了，當(dāng)然這兒還需要修正一下constructor的指向。

function inherit(subType,superType){
 var prototype=Object.create(superType.prototype);
 prototype.constructor=subType;
 subType.prototype=prototype;
}

2. 分別執(zhí)行父類和子類的構(gòu)造函數(shù)，繼承這部分下的屬性：

//父類
function Super(){
this.sss=1
}
//子類
function Sub(){
//arguments是Sub收到的參數(shù)，將這個參數(shù)傳給Super
Super.apply(this, arguments)
}
//實例
sub = new Sub()

Super.apply(this, arguments)這一句，將Super類作為一個普通函數(shù)來執(zhí)行，但是Super類的this被換成了Sub類的this，Sub收到的參數(shù)也傳給了Super

最后執(zhí)行結(jié)果相當(dāng)于sub.sss=1

附上各種繼承方式的特點和優(yōu)缺點

曾經(jīng)一段時間因為javascript關(guān)于類實現(xiàn)繼承的不規(guī)范，導(dǎo)致各種各樣實現(xiàn)繼承的代碼；而實際上不管代碼怎么變，繼承都基于兩種方式：

1.通過原型鏈，即子類的原型指向父類的實例從而實現(xiàn)原型共享。
2.借用構(gòu)造函數(shù)，即通過js的apply、call實現(xiàn)子類調(diào)用父類的屬性、方法；

原型鏈方式可以實現(xiàn)所有屬性方法共享，但無法做到屬性、方法獨享（例如Sub1修改了父類的函數(shù)，其他所有的子類Sub2、Sub3...想調(diào)用舊的函數(shù)就無法實現(xiàn)了）；

而借用構(gòu)造函數(shù)除了能獨享屬性、方法外還能在子類構(gòu)造函數(shù)中傳遞參數(shù)，但代碼無法復(fù)用。總體而言就是可以實現(xiàn)所有屬性方法獨享，但無法做到屬性、方法共享（例如，Sub1新增了一個函數(shù)，然后想讓Sub2、Sub3...都可以用的話就無法實現(xiàn)了，只能Sub2、Sub3...各自在構(gòu)造函數(shù)中新增）。

組合繼承就是把以上兩種繼承方式一起使用，把共享的屬性、方法用原型鏈繼承實現(xiàn)，獨享的屬性、方法用借用構(gòu)造函數(shù)實現(xiàn)，所以組合繼承幾乎完美實現(xiàn)了js的繼承；為什么說是“幾乎”？因為認(rèn)(dan)真(teng)的geek們發(fā)現(xiàn)組合繼承有一個小bug，實現(xiàn)的時候調(diào)用了兩次超類（父類），性能上不合格啊有木有！怎么解決呢？于是“寄生繼承”就出來了。

寄生繼承（原型式繼承）就是不用實例化父類了，直接實例化一個臨時副本實現(xiàn)了相同的原型鏈繼承。（即子類的原型指向父類副本的實例從而實現(xiàn)原型共享）

“寄生組合繼承”用了“寄生繼承”修復(fù)了“組合繼承”的小bug，從而讓js完美實現(xiàn)繼承了。

實例代碼：

function SuperType(name,colors){
  this.name=name;
  this.colors=colors;
}
SuperType.prototype.getSuperProperty=function(){ return this.name; }
function SubType(job,name,colors){
  SuperType.call(this,name,colors);
  this.job=job;
}
SubType.prototype.getSubPrototype=function(){ return this.job; }
function inherit(subType,superType){
  var prototype=Object.create(superType.prototype);
  prototype.constructor=subType;
  subType.prototype=prototype;
}
inherit(SubType,SuperType);
var instance=new SubType("doctor","John",["red","green"]);
console.log(instance.getSubPrototype());  //輸出"doctor"
console.log(instance.getSuperProperty());  //輸出"John"，成功調(diào)用在父類原型定義的方法

屬性繼承代碼是SuperType.call(this,name,colors);

原型繼承代碼是inherit(SubType,SuperType);

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

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

最新評論