最近在閱讀《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 = namethis.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)化了代碼，將方法放在原型鏈上，而通過(guò)子類構(gòu)造函數(shù)里的SuperType.call()，為每個(gè)子類對(duì)象初始化了父類對(duì)象里面的屬性，這些屬性就變成了子類獨(dú)享的。組合繼承成為js最常用的繼承模式。

但組合模式也不是沒有缺點(diǎn)。它的缺點(diǎn)在于：

無(wú)論在什么情況下，都會(huì)調(diào)用兩次超類型構(gòu)造函數(shù)，一次是在創(chuàng)建子類型原型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)的內(nèi)部。

但令我百思不得其解的是，從上面給出的例子來(lái)看，組合繼承并沒有調(diào)用兩次超類型構(gòu)造函數(shù)。當(dāng)實(shí)例化SubType的時(shí)候有通過(guò)SuperType.call()調(diào)用一次過(guò)一次SuperType。同時(shí)，instance1和instance2都是SubType對(duì)象。那么，第二次調(diào)用從何而來(lái)？

其實(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 = namethis.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è)例子中，我們來(lái)看一下instance1的組成：

在第一次調(diào)用SuperType的時(shí)候，SubType.prototype會(huì)得到兩個(gè)屬性：color和name，它們也是SuperType的實(shí)例屬性，不過(guò)現(xiàn)在位于SubType的原型上面。

在實(shí)例化SubType時(shí)調(diào)用了第二次SuperType,這個(gè)時(shí)候SubType實(shí)例對(duì)象多了兩個(gè)name和color的屬性，這兩個(gè)屬性屬于實(shí)例屬性，會(huì)覆蓋掉在SubType原型對(duì)象的屬性。

為了解決組合繼承這種無(wú)論如何都會(huì)調(diào)用兩次的問(wèn)題，便可以引用寄生組合式繼承。

寄生組合式繼承

寄生組合式繼承是在原型式繼承的基礎(chǔ)上做的。

原型式繼承時(shí)道格拉斯·克羅克福德在2006年提出來(lái)的。主要目的是可以基于已有的對(duì)象創(chuàng)建新的對(duì)象，而不必因此創(chuàng)建自定義類型。

具體代碼如下：

function object(o) {function F(){}F.prototype = oreturn new F() }

通過(guò)將o賦給F的原型，再返回一個(gè)原型為o的新對(duì)象。

而寄生組合式繼承在此基礎(chǔ)上的代碼為：

function inheritPrototype(superType,subType){var prototype = object(superType.prototype) // 首先返回了一個(gè)原型是superType的原型的新對(duì)象prototype.constructor = subType // prototype的constructor從superType變成subTypesubType.protoType = prototype // 將擁有指向SubType函數(shù)的constructor，以及superType對(duì)象屬性的新對(duì)象，賦給subType的原型}function SuperType(name) {this.name = namethis.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ǔ)上，通過(guò)一次性將子對(duì)象的原型替換成父對(duì)象的原型，同時(shí)原型指向子對(duì)象。每次初始化對(duì)象就只調(diào)用一次SuperType。可以提升效率。

總結(jié)

以上是生活随笔為你收集整理的js组合模式和寄生组合模式的区别研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。