使用JavaScript如何實現寄生組合式繼承

這篇文章主要介紹了JavaScript寄生組合式繼承,結合實例形式詳細分析了寄生組合式繼承原理、實現方法與相關注意事項,需要的朋友可以參考下

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

其實《JavaScript高級程式設計》這本書中已經有完整程式碼了，只要把程式碼讀懂就知道這個繼承是怎麼回事。

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

//通过执行构造函数设置属性
function A(){
  this.a = 1;
}
//通过原型设置属性
A.prototype.b = 1;

所以：

一個類別Sub要繼承另一個類別Super，需要繼承父類的prototype下的屬性，還要執行一下父類別的建構子。

即一個類別Sub要繼承另一個類別Super，既要透過原型鏈實作對原型屬性和方法的繼承，又要透過在子類別建構子內呼叫父類別建構子實作對實例屬性的繼承。

1. 繼承prototype下的屬性

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

直接「=」肯定不行，因為Sub.prototype中修改屬性後，不能影響Super.prototype裡面的對象，也就是不能Sub.prototype=Super.prototype。

首先寫一個創建物件副本的方法

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

上面的函數得到的物件ox，擁有了物件o的全部屬性（在原型鏈上），而修改ox的屬性，不會影響到o，相當於把o複製了一份。

原型式繼承就是上面的「object」函數，在許多類別庫原始碼中都能發現它的身影

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

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

ECMAScirpt 5透過新增Object.create()方法規範化了原型式繼承。

使用object方法，就可以將Super.prototype的屬性「複製」到Sub.prototype上了，當然這兒還需要修正一下constructor的指向。

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

2. 分別執行父類別和子類別的建構函數，繼承這部分下的屬性：

//父类
function Super(){
this.sss=1
}
//子类
function Sub(){
//arguments是Sub收到的参数，将这个参数传给Super
Super.apply(this, arguments)
}
//实例
sub = new Sub()

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

最後執行結果相當於sub.sss=1

附上各種繼承方式的特點和優缺點

曾經一段時間因為javascript關於類別實現繼承的不規範，導致各種實作繼承的程式碼；而實際上不管程式碼怎麼變，繼承都基於兩種方式：

#1.透過原型鏈，即子類別的原型指向父類的實例從而實現原型共享。
2.借用建構子，也就是透過js的apply、call實作子類別呼叫父類別的屬性、方法；

原型鏈方式可以實作所有屬性方法共享，但無法做到屬性、方法獨享（例如Sub1修改了父類別的函數，其他所有的子類別Sub2、Sub3...想呼叫舊的函數就無法實現了）；

而借用建構子除了能獨享屬性、方法外還能在子類別建構子中傳遞參數，但程式碼無法重複使用。整體而言就是可以實現所有屬性方法獨享，但無法做到屬性、方法共享（例如，Sub1新增了一個函數，然後想讓Sub2、Sub3...都可以用的話就無法實現了，只能Sub2、Sub3...各自在建構函式中新增）。

組合繼承就是把以上兩種繼承方式一起使用，把共享的屬性、方法用原型鏈繼承實現，獨享的屬性、方法用借用構造函數實現，所以組合繼承幾乎完美實現了js的繼承；為什麼說是「幾乎」？因為認定(dan)真(teng)的geek們發現組合繼承有一個小bug，實作的時候呼叫了兩次超類別（父類別），效能上不合格啊有木有！怎麼解決呢？於是「寄生繼承」就出來了。

寄生繼承（原型式繼承）就是不用實例化父類別了，直接實例化一個暫存副本實作了相同的原型鏈繼承。 （即子類別的原型指向父類別副本的實例從而實現原型共享）

「寄生組合繼承」用了「寄生繼承」修復了「組合繼承」的小bug，從而讓js完美實現繼承了。

實例程式碼：

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"，成功调用在父类原型定义的方法

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

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在JS如何實作碰撞偵測

在angular1如何配合gulp和bower來使用？

偵錯js腳本有哪些方法？

使用Angular如何實作搜尋框

#在vue中有關插值的詳細說明

#

以上是使用JavaScript如何實現寄生組合式繼承的詳細內容。更多資訊請關注PHP中文網其他相關文章！