簡單談談JavaScript寄生式組合繼承
組合繼承
組合繼承也被稱為偽經典繼承,它綜合了我們昨天說的原型鏈和盜用建構函式,將倆者的有點結合在了一起。它的基本思想是使用原型鏈繼承原型上的屬性和方法,通過盜用建構函式繼承例項屬性,這樣的好處就是可以把方法定義在原型上覆用,每個例項又有自己的屬性。
function SuperType (name) { this.name = name; this.colors = ["red","yellow","bule"]; } SuperType.prototype.sayName = function(){ console.log(this.name) } function SubType(name,age){ SuperType.call(this,name); this.age = age; } SubType.prototype = new SCIZlmdWuperType(); SubType.prototype.sayAge = function(){ console.log(this.age); } let instancel = new SubType("jackson",22); instancel.colors.push("pink"); instancel.sayName(); // "jackson" instancel.sayAge();//22 console.log(instancel.colorhttp://www.cppcns.coms);// ["red","bule","pink"] let instance2 = new SubType("bear",20); console.log(instance2.colors); // ["red","bule"] instance2.sayName(); // "bear"; instance2.sayAge(); // 20
上面的程式碼大家有沒有一種豁然開朗的感覺,SubType呼叫SuperType,並且傳入name,然後定義自己的屬性age,此外SubType.prototype也被賦值位SuperType例項。原型賦值後又在這個原型上新增sayage方法,這樣建立倆個subType例項,這倆個例項都有自己屬性,還可以共享相同的方法。
組合繼承彌補了原型鏈和盜用建構函式的不足,是中使用最多的繼承模式。
寄生式繼承
寄生式繼承就是用一個函式包裝一個物件,然後返回這個函式的呼叫,這個函式就變成了個可以隨意增添屬性的例項或物件。object.create()就是這個原理。
// 寄生式繼承 function subobject(obj) { let clone = Object(obj); clone.sayName = function(){ console.log("jackson") }; return clone; } let sub = { name:"bear" } let sup = subobject(sub); sup.sayName();//jackson
這個例子基於sub物件返回一個新物件,返回的sup物件有sub的屬性和方法,還有一個新方法sayName()。
寄生式繼承同樣適合主要關注物件,而不在乎型別和建構函式的場景。object()函式不是寄生式繼承所必需的,任何返回新物件的http://www.cppcns.com函式都可以在這裡使用。
注意 通過寄生式繼承給物件新增函式會導致函式難以重用,與建構函式模式類似。
寄生式組合繼承
組合繼承存在這一定的效率問題,它的父類建構函式始終會被呼叫倆次,一次在建立字類原型時呼叫,另一次在子類建構函式中呼叫。本質上子類只需要在執行時重寫自己的原型就行了。
function ihttp://www.cppcns.comnheritPrototype(subType,superType) {
let prototype = Object(superType.prototype); // 建立物件
prototype.constructor = subType; // 增強物件
subType.prototype = prototype; // 賦值www.cppcns.com物件
}
這個 inheritPrototype()函式實現了寄生式組合繼承的核心邏輯。這個函式接收兩個引數:子類建構函式和父類建構函式。在這個函式內部,第一步是建立父類原型的一個副本。然後,給返回的 prototype 物件設定 constructor 屬性,解決由於重寫原型導致預設 constructor 丟失的問題。最後將新建立的物件賦值給子型別的原型。如下例所示,呼叫 inheritPrototype()就可以實現前面例子中的子型別原型賦值:
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); };
這裡只調用了一次 SuperType 建構函式,避免了 SubType.prototype 上不必要也用不到的屬性, 因此可以說這個例子的效率更高。而且原型鏈仍然保持不變。
總結
到此這篇關於寄生式組合繼承的文章就介紹到這了,更多相關JS寄生式組合繼承內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!