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

創(chuàng)新互聯(lián)長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為景德鎮(zhèn)企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，景德鎮(zhèn)網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

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

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

所以：

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

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

1. 繼承prototype下的屬性

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

直接「=」肯定不行，因?yàn)镾ub.prototype中修改屬性后，不能影響Super.prototype里面的對象，即不能Sub.prototype=Super.prototype。

首先寫一個(gè)創(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)它的身影

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

tips:總所周知，原型鏈繼承是子類的原型指向父類的實(shí)例從而實(shí)現(xiàn)原型共享，而原型式繼承是子類的原型指向父類副本的實(shí)例從而實(shí)現(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ù)，將這個(gè)參數(shù)傳給Super
Super.apply(this, arguments)
}
//實(shí)例
sub = new Sub()

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

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

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

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

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

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

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

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

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

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

實(shí)例代碼：

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錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

當(dāng)前名稱：JavaScript寄生組合式繼承實(shí)例詳解
本文路徑：http://www.chinadenli.net/article12/iigidc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、App開發(fā)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、App設(shè)計(jì)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)