資訊專欄INFORMATION COLUMN
摘要：組合模式繼承結(jié)合了構(gòu)造函數(shù)繼承時(shí)可以為每個(gè)屬性重新初始化，構(gòu)造一個(gè)副本的優(yōu)點(diǎn)，以及原型鏈繼承時(shí)一次定義處處共享的優(yōu)點(diǎn)。但令我百思不得其解的是，從上面給出的例子來看，組合繼承并沒有調(diào)用兩次超類型構(gòu)造函數(shù)。
最近在閱讀《js權(quán)威指南》的繼承這一章，對(duì)于組合模式和寄生組合模式的區(qū)別有點(diǎn)混淆，在多次重讀以及嘗試之后，得到一些心得。
組合模式繼承結(jié)合了構(gòu)造函數(shù)繼承時(shí)可以為每個(gè)屬性重新初始化，構(gòu)造一個(gè)副本的優(yōu)點(diǎn)，以及原型鏈繼承時(shí)一次定義處處共享的優(yōu)點(diǎn)。
下面看具體的例子
/*js*/
function SuperType(name) {
this.name = name
this.color = ["red","blue","green"]
}
SuperType.prototype.getSuperName = function () { //在原型鏈上而不是構(gòu)造函數(shù)里面添加方法，是為了進(jìn)行方法復(fù)用
console.log(this.name)
}
function SubType(name, age) {
SuperType.call(this,name) //在子類構(gòu)造函數(shù)里面調(diào)用父類構(gòu)造函數(shù)，創(chuàng)建一個(gè)新的對(duì)象
this.age = age
}
SubType.prototype.getSubAge = function () { //子類特有的方法
console.log(this.age)
}
var instance1 = new SubType("Maria",24)
instance1.color.push("black")
console.log(instance1.color) // ["red","blue","green","black"]
var instance2 = new SubType("Jack",33)
console.log(instance2.color) // ["red","blue","green"]
可以看到即使父類有引用對(duì)象，子類兩個(gè)實(shí)例的對(duì)象之間也不會(huì)互相影響。
這個(gè)例子最大程度上地優(yōu)化了代碼，將方法放在原型鏈上，而通過子類構(gòu)造函數(shù)里的SuperType.call()，為每個(gè)子類對(duì)象初始化了父類對(duì)象里面的屬性，這些屬性就變成了子類獨(dú)享的。組合繼承成為js最常用的繼承模式。
但組合模式也不是沒有缺點(diǎn)。它的缺點(diǎn)在于：
無論在什么情況下，都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)，一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)的內(nèi)部。
但令我百思不得其解的是，從上面給出的例子來看，組合繼承并沒有調(diào)用兩次超類型構(gòu)造函數(shù)。當(dāng)實(shí)例化SubType的時(shí)候有通過SuperType.call()調(diào)用一次過一次SuperType。同時(shí)，instance1和instance2都是SubType對(duì)象。那么，第二次調(diào)用從何而來？
其實(shí)，上面的例子是并不完整的。兩個(gè)實(shí)例實(shí)際上只繼承了超類型的屬性，卻沒有繼承超類型的方法。
我們?cè)趯?shí)例化SubType的時(shí)候，實(shí)際上就自動(dòng)給實(shí)例化對(duì)象創(chuàng)建了一個(gè)新的原型對(duì)象，這個(gè)原型對(duì)象跟超類型的原型對(duì)象沒有什么關(guān)系。所以SubType并沒有繼承g(shù)etSuperName()方法。
下面為子類型繼承父類型原型的例子：
/*js*/
function SuperType(name) {
this.name = name
this.color = ["red","blue","green"]
}
SuperType.prototype.getSuperName = function () {
console.log(this.name)
}
function SubType(name, age) {
SuperType.call(this,name)
this.age = age
}
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType
SubType.prototype.getSubAge = function () {
console.log(this.age)
}
var instance1 = new SubType()
instance1.color.push("black")
console.log(instance1.color)
var instance2 = new SubType()
console.log(instance2.color)
在這個(gè)例子中，我們來看一下instance1的組成：
在第一次調(diào)用SuperType的時(shí)候，SubType.prototype會(huì)得到兩個(gè)屬性：color和name，它們也是SuperType的實(shí)例屬性，不過現(xiàn)在位于SubType的原型上面。
在實(shí)例化SubType時(shí)調(diào)用了第二次SuperType,這個(gè)時(shí)候SubType實(shí)例對(duì)象多了兩個(gè)name和color的屬性，這兩個(gè)屬性屬于實(shí)例屬性，會(huì)覆蓋掉在SubType原型對(duì)象的屬性。
為了解決組合繼承這種無論如何都會(huì)調(diào)用兩次的問題，便可以引用寄生組合式繼承。
寄生組合式繼承寄生組合式繼承是在原型式繼承的基礎(chǔ)上做的。
原型式繼承時(shí)道格拉斯·克羅克福德在2006年提出來的。主要目的是可以基于已有的對(duì)象創(chuàng)建新的對(duì)象，而不必因此創(chuàng)建自定義類型。
具體代碼如下：
function object(o) {
function F(){}
F.prototype = o
return new F()
}
通過將o賦給F的原型，再返回一個(gè)原型為o的新對(duì)象。
而寄生組合式繼承在此基礎(chǔ)上的代碼為：
function inheritPrototype(superType,subType){
var prototype = object(superType.prototype) // 首先返回了一個(gè)原型是superType的原型的新對(duì)象
prototype.constructor = subType // prototype的constructor從superType變成subType
subType.protoType = prototype // 將擁有指向SubType函數(shù)的constructor，以及superType對(duì)象屬性的新對(duì)象，賦給subType的原型
}
function SuperType(name) {
this.name = name
this.color = ["red","blue","green"]
}
SuperType.prototype.getSuperName = function () {
console.log(this.name)
}
function SubType(name, age) {
SuperType.call(this,name)
this.age = age
}
inheritPrototype(SuperType,SubType) //調(diào)用inheritPrototype方法替換子類的原型
SubType.prototype.getSubAge = function () {
console.log(this.age)
}
var instance1 = new SubType("Maria",24)
instance1.color.push("black")
console.log(instance1.color) // ["red","blue","green","black"]
var instance2 = new SubType("Jack",33)
console.log(instance2.color) // ["red","blue","green"]
寄生組合式繼承在組合繼承的基礎(chǔ)上做了改進(jìn)，只需要調(diào)用一次inheritPrototype函數(shù)，就可以把SuperType對(duì)象的原型屬性繼承給SubType對(duì)象，同時(shí)SubType實(shí)例的原型對(duì)象依然指向SubType函數(shù)。
ECMAScript把object()做了改進(jìn)，變成了Object.create()方法，所以inheritPrototype方法的第一行可以寫成：
var prototype = Object.create(SuperType.prototype)
對(duì)比組合模式和寄生組合模式：
組合模式：為每個(gè)屬性重新初始化，構(gòu)造一個(gè)副本。但是每次實(shí)例化都會(huì)調(diào)用兩次SuperType，降低性能。
寄生組合模式：在組合模式的基礎(chǔ)上，通過一次性將子對(duì)象的原型替換成父對(duì)象的原型，同時(shí)原型指向子對(duì)象。每次初始化對(duì)象就只調(diào)用一次SuperType。可以提升效率。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102010.html
摘要：因?yàn)檫@造成了繼承鏈的紊亂，因?yàn)榈膶?shí)例是由構(gòu)造函數(shù)創(chuàng)建的，現(xiàn)在其屬性卻指向了為了避免這一現(xiàn)象，就必須在替換對(duì)象之后，為新的對(duì)象加上屬性，使其指向原來的構(gòu)造函數(shù)。這個(gè)函數(shù)接收兩個(gè)參數(shù)子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。 最近一直在研究js面向?qū)ο?，原型鏈繼承是一個(gè)難點(diǎn)，下面是我對(duì)繼承的理解以下文章借鑒自CSDN季詩筱的博客 原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實(shí)現(xiàn)...
摘要：將構(gòu)造函數(shù)的作用域賦值給新的對(duì)象因此指向了這個(gè)新對(duì)象。以這種方式定義的構(gòu)造函數(shù)是定義在對(duì)象在瀏覽器是對(duì)象中的。構(gòu)造函數(shù)在不返回值的情況下，默認(rèn)會(huì)返回新對(duì)象實(shí)例。在創(chuàng)建子類型的實(shí)例時(shí)，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 創(chuàng)建對(duì)象 雖然Object構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕韯?chuàng)建單個(gè)對(duì)象，但是這些方式有明顯的缺點(diǎn)：使用同一個(gè)接口創(chuàng)建很多對(duì)象，會(huì)產(chǎn)生大量的重復(fù)代碼。為解決這個(gè)問題，人們開始...
摘要：創(chuàng)建自定義的構(gòu)造函數(shù)之后，其原型對(duì)象只會(huì)取得屬性，其他方法都是從繼承來的。優(yōu)缺點(diǎn)寄生式繼承在主要考慮對(duì)象而不是創(chuàng)建自定義類型和構(gòu)造函數(shù)時(shí)，是十分有用的。 原文鏈接：https://kongchenglc.coding.me... 1.原型鏈 ??js的繼承機(jī)制不同于傳統(tǒng)的面向?qū)ο笳Z言，采用原型鏈實(shí)現(xiàn)繼承，基本思想是利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法。理解原型鏈必須先理...
摘要：將構(gòu)造函數(shù)的作用域賦值給新對(duì)象因此指向了新對(duì)象執(zhí)行構(gòu)造函數(shù)的代碼為這個(gè)新對(duì)象添加屬性返回對(duì)象最初是用來標(biāo)識(shí)對(duì)象類型的。但提到檢測(cè)對(duì)象類型，還是使用將構(gòu)造函數(shù)當(dāng)作函數(shù)構(gòu)造函數(shù)與其他函數(shù)唯一區(qū)別。 創(chuàng)建對(duì)象 雖然Object構(gòu)造函數(shù)與對(duì)象字面量都能創(chuàng)建單個(gè)對(duì)象， 但這些方式都有明顯的缺點(diǎn)： 使用同一個(gè)接口創(chuàng)建很多對(duì)象， 會(huì)產(chǎn)生大量重復(fù)代碼。 var obj = {}; //對(duì)象字面量 va...
摘要：寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似，即創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部已某種方式來增強(qiáng)對(duì)象，最后再像真的是它做了所有工作一樣返回對(duì)象。 這篇本來應(yīng)該是作為寫JS 面向?qū)ο蟮那白?，只是作為《javascript高級(jí)程序設(shè)計(jì)》繼承一章的筆記 原型鏈 code 實(shí)現(xiàn) function SuperType() { this.colors = [red,blu...
閱讀 740·2021-11-24 10:19
閱讀 1126·2021-09-13 10:23
閱讀 3445·2021-09-06 15:15
閱讀 1788·2019-08-30 14:09
閱讀 1702·2019-08-30 11:15
閱讀 1851·2019-08-29 18:44
閱讀 949·2019-08-29 16:34
閱讀 2470·2019-08-29 12:46
