js組合模式和寄生組合模式的區別研究

最近在閱讀《js權威指南》的繼承這一章,對於組合模式和寄生組合模式的區別有點混淆,在多次重讀以及嘗試之後,得到一些心得。

組合模式繼承

結合了構造函數繼承時可以爲每個屬性重新初始化,構造一個副本的優點,以及原型鏈繼承時一次定義處處共享的優點。

下面看具體的例子

/*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.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']

可以看到即使父類有引用對象,子類兩個實例的對象之間也不會互相影響。

這個例子最大程度上地優化了代碼,將方法放在原型鏈上,而通過子類構造函數裏的SuperType.call(),爲每個子類對象初始化了父類對象裏面的屬性,這些屬性就變成了子類獨享的。組合繼承成爲js最常用的繼承模式。

但組合模式也不是沒有缺點。它的缺點在於:

無論在什麼情況下,都會調用兩次超類型構造函數,一次是在創建子類型原型的時候,另一次是在子類型構造函數的內部。

但令我百思不得其解的是,從上面給出的例子來看,組合繼承並沒有調用兩次超類型構造函數。當實例化SubType的時候有通過SuperType.call()調用一次過一次SuperType。同時,instance1和instance2都是SubType對象。那麼,第二次調用從何而來?

其實,上面的例子是並不完整的。兩個實例實際上只繼承了超類型的屬性,卻沒有繼承超類型的方法。

extend1

我們在實例化SubType的時候,實際上就自動給實例化對象創建了一個新的原型對象,這個原型對象跟超類型的原型對象沒有什麼關係。所以SubType並沒有繼承getSuperName()方法。

extend2

下面爲子類型繼承父類型原型的例子:

/*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)

在這個例子中,我們來看一下instance1的組成:

extend3

在第一次調用SuperType的時候,SubType.prototype會得到兩個屬性:colorname,它們也是SuperType的實例屬性,不過現在位於SubType的原型上面。

在實例化SubType時調用了第二次SuperType,這個時候SubType實例對象多了兩個namecolor的屬性,這兩個屬性屬於實例屬性,會覆蓋掉在SubType原型對象的屬性。

爲了解決組合繼承這種無論如何都會調用兩次的問題,便可以引用寄生組合式繼承。

寄生組合式繼承

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

原型式繼承時道格拉斯·克羅克福德在2006年提出來的。主要目的是可以基於已有的對象創建新的對象,而不必因此創建自定義類型。

具體代碼如下:

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

通過將o賦給F的原型,再返回一個原型爲o的新對象。

而寄生組合式繼承在此基礎上的代碼爲:

  function inheritPrototype(superType,subType){
    var prototype = object(superType.prototype) // 首先返回了一個原型是superType的原型的新對象
    prototype.constructor = subType // prototype的constructor從superType變成subType
    subType.protoType = prototype // 將擁有指向SubType函數的constructor,以及superType對象屬性的新對象,賦給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) //調用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']

寄生組合式繼承在組合繼承的基礎上做了改進,只需要調用一次inheritPrototype函數,就可以把SuperType對象的原型屬性繼承給SubType對象,同時SubType實例的原型對象依然指向SubType函數。

ECMAScript把object()做了改進,變成了Object.create()方法,所以inheritPrototype方法的第一行可以寫成:

 var prototype = Object.create(SuperType.prototype)

對比組合模式和寄生組合模式:

  • 組合模式:爲每個屬性重新初始化,構造一個副本。但是每次實例化都會調用兩次SuperType,降低性能。
  • 寄生組合模式:在組合模式的基礎上,通過一次性將子對象的原型替換成父對象的原型,同時原型指向子對象。每次初始化對象就只調用一次SuperType。可以提升效率。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章