亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js組合模式和寄生組合模式的區(qū)別研究

tolerious / 1182人閱讀

摘要：組合模式繼承結(jié)合了構(gòu)造函數(shù)繼承時可以為每個屬性重新初始化，構(gòu)造一個副本的優(yōu)點，以及原型鏈繼承時一次定義處處共享的優(yōu)點。但令我百思不得其解的是，從上面給出的例子來看，組合繼承并沒有調(diào)用兩次超類型構(gòu)造函數(shù)。

最近在閱讀《js權(quán)威指南》的繼承這一章，對于組合模式和寄生組合模式的區(qū)別有點混淆，在多次重讀以及嘗試之后，得到一些心得。

組合模式繼承 
結(jié)合了構(gòu)造函數(shù)繼承時可以為每個屬性重新初始化，構(gòu)造一個副本的優(yōu)點，以及原型鏈繼承時一次定義處處共享的優(yōu)點。

下面看具體的例子

/*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)建一個新的對象
    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"]

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

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

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

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

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

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

我們在實例化SubType的時候，實際上就自動給實例化對象創(chuàng)建了一個新的原型對象，這個原型對象跟超類型的原型對象沒有什么關(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)

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

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

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

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

寄生組合式繼承

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

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

具體代碼如下：

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

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

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

  function inheritPrototype(superType,subType){
    var prototype = object(superType.prototype) // 首先返回了一個原型是superType的原型的新對象
    prototype.constructor = subType // prototype的constructor從superType變成subType
    subType.protoType = prototype // 將擁有指向SubType函數(shù)的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) //調(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對象的原型屬性繼承給SubType對象，同時SubType實例的原型對象依然指向SubType函數(shù)。

ECMAScript把object()做了改進(jìn)，變成了Object.create()方法，所以inheritPrototype方法的第一行可以寫成：

 var prototype = Object.create(SuperType.prototype)

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

組合模式：為每個屬性重新初始化，構(gòu)造一個副本。但是每次實例化都會調(diào)用兩次SuperType，降低性能。

寄生組合模式：在組合模式的基礎(chǔ)上，通過一次性將子對象的原型替換成父對象的原型，同時原型指向子對象。每次初始化對象就只調(diào)用一次SuperType。可以提升效率。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102010.html

相關(guān)文章

  • JavaScript面向?qū)ο?--原型鏈繼承

    摘要：因為這造成了繼承鏈的紊亂，因為的實例是由構(gòu)造函數(shù)創(chuàng)建的，現(xiàn)在其屬性卻指向了為了避免這一現(xiàn)象，就必須在替換對象之后，為新的對象加上屬性，使其指向原來的構(gòu)造函數(shù)。這個函數(shù)接收兩個參數(shù)子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。 最近一直在研究js面向?qū)ο螅玩溊^承是一個難點，下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客 原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實現(xiàn)...

    vspiders 評論0 收藏0

  • js面向?qū)ο蠹霸屠^承學(xué)習(xí)筆記。

    摘要：將構(gòu)造函數(shù)的作用域賦值給新的對象因此指向了這個新對象。以這種方式定義的構(gòu)造函數(shù)是定義在對象在瀏覽器是對象中的。構(gòu)造函數(shù)在不返回值的情況下，默認(rèn)會返回新對象實例。在創(chuàng)建子類型的實例時，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。 創(chuàng)建對象 雖然Object構(gòu)造函數(shù)或?qū)ο笞置媪慷伎梢杂脕韯?chuàng)建單個對象，但是這些方式有明顯的缺點：使用同一個接口創(chuàng)建很多對象，會產(chǎn)生大量的重復(fù)代碼。為解決這個問題，人們開始...

    CrazyCodes 評論0 收藏0

  • js繼承的理解

    摘要：創(chuàng)建自定義的構(gòu)造函數(shù)之后，其原型對象只會取得屬性，其他方法都是從繼承來的。優(yōu)缺點寄生式繼承在主要考慮對象而不是創(chuàng)建自定義類型和構(gòu)造函數(shù)時，是十分有用的。 原文鏈接：https://kongchenglc.coding.me... 1.原型鏈 ??js的繼承機(jī)制不同于傳統(tǒng)的面向?qū)ο笳Z言，采用原型鏈實現(xiàn)繼承，基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。理解原型鏈必須先理...

    BlackFlagBin 評論0 收藏0

  • 理解js對象

    摘要：將構(gòu)造函數(shù)的作用域賦值給新對象因此指向了新對象執(zhí)行構(gòu)造函數(shù)的代碼為這個新對象添加屬性返回對象最初是用來標(biāo)識對象類型的。但提到檢測對象類型，還是使用將構(gòu)造函數(shù)當(dāng)作函數(shù)構(gòu)造函數(shù)與其他函數(shù)唯一區(qū)別。 創(chuàng)建對象 雖然Object構(gòu)造函數(shù)與對象字面量都能創(chuàng)建單個對象， 但這些方式都有明顯的缺點： 使用同一個接口創(chuàng)建很多對象， 會產(chǎn)生大量重復(fù)代碼。 var obj = {}; //對象字面量 va...

    zhouzhou 評論0 收藏0

  • 《javascript高級程序設(shè)計》 繼承實現(xiàn)方式

    摘要：寄生式繼承的思路與寄生構(gòu)造函數(shù)和工廠模式類似，即創(chuàng)建一個僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部已某種方式來增強(qiáng)對象，最后再像真的是它做了所有工作一樣返回對象。 這篇本來應(yīng)該是作為寫JS 面向?qū)ο蟮那白啵皇亲鳛椤秊avascript高級程序設(shè)計》繼承一章的筆記 原型鏈 code 實現(xiàn) function SuperType() { this.colors = [red,blu...

    cppprimer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<