對(duì)JS繼承的一點(diǎn)思考

wapeyang 發(fā)布于2019-08-19 17:14 / 1318人閱讀

摘要：舉個(gè)例子，現(xiàn)在有一個(gè)叫做的構(gòu)造函數(shù)，表示貓對(duì)象的原型。不受的影響但是通過(guò)上面的例子你會(huì)發(fā)現(xiàn)用構(gòu)造函數(shù)生成實(shí)例對(duì)象，它有一個(gè)缺點(diǎn)，那就是無(wú)法共享屬性和方法。

在Javascript語(yǔ)言中，new命令后面跟的不是類(lèi)，而是構(gòu)造函數(shù)。

舉個(gè)例子，現(xiàn)在有一個(gè)叫做CAT的構(gòu)造函數(shù)，表示貓對(duì)象的原型。

function CAT(name){
    this.name = name;
    this.age = 3;
}

當(dāng)我們new這個(gè)構(gòu)造函數(shù)的時(shí)候，就會(huì)生成一個(gè)貓對(duì)象的實(shí)例。

var Tom = new CAT("Tom");
var Jack = new CAT("Jack");
Tom.age = 5;
alert(Tom.name+","+Tom.age);  //Tom,5
alert(Jack.name+","+Jack.age);  //Jack,3  不受Tom的影響

但是通過(guò)上面的例子你會(huì)發(fā)現(xiàn)：用構(gòu)造函數(shù)生成實(shí)例對(duì)象，它有一個(gè)缺點(diǎn)，那就是無(wú)法共享屬性和方法。

因?yàn)檫@兩個(gè)對(duì)象的age屬性是獨(dú)立的，修改其中一個(gè)，不會(huì)影響到另一個(gè)。

這樣做的壞處就是會(huì)造成資源浪費(fèi)，那么我們要如何來(lái)解決這件事呢，那就需要prototype出場(chǎng)了。

這個(gè)屬性包含一個(gè)對(duì)象（以下簡(jiǎn)稱(chēng)"prototype對(duì)象"），所有實(shí)例對(duì)象需要共享的屬性和方法，都放在這個(gè)對(duì)象里面；那些不需要共享的屬性和方法，就放在構(gòu)造函數(shù)里面。

CAT的代碼利用prototype就可以改寫(xiě)成這樣子了：
function CAT(name){
    this.name = name;
}
CAT.prototype.age = 3;
var Tom = new CAT("Tom");
var Jack = new CAT("Jack");
CAT.prototype.age = 5;
alert(Tom.name+","+Tom.age);   //Tom,5
alert(Jack.name+","+Jack.age);  //Jack,5

age屬性放在prototype對(duì)象里，是兩個(gè)實(shí)例對(duì)象共享的。只要修改了prototype對(duì)象，就會(huì)同時(shí)影響到兩個(gè)實(shí)例對(duì)象。

云服務(wù)器 GPU云服務(wù)器對(duì)人工智能的思考 js求和表的一列數(shù)據(jù) js 繼承 js繼承

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/78324.html

相關(guān)文章

instanceof使用中可能漏掉的一點(diǎn)細(xì)節(jié)

摘要：代碼傳送門(mén)如上代碼示例，從其運(yùn)行結(jié)果可知，是等于的原型的，是被對(duì)象后返回的函數(shù)，從驗(yàn)證結(jié)果來(lái)看，函數(shù)經(jīng)過(guò)的一層包裝，依然不會(huì)影響其原型檢測(cè)的綁定。前言在面向?qū)ο笳Z(yǔ)言中，一般都有關(guān)鍵字 instanceof 來(lái)檢測(cè)對(duì)象類(lèi)型，更準(zhǔn)確點(diǎn)來(lái)說(shuō)是檢測(cè)對(duì)象是哪個(gè)類(lèi)型的實(shí)例。那么在 JS 中這個(gè)關(guān)鍵字又有什么不同之處呢？此文僅是一篇對(duì) ES 標(biāo)準(zhǔn)中 instanceof 關(guān)鍵字的解讀，并記錄了在此過(guò)程中...

lauren_liuling 2019-05-21 19:52 評(píng)論0 收藏0
對(duì)js原型的思考

摘要：原型鏈上有兩個(gè)關(guān)鍵詞和比較重要，是設(shè)置構(gòu)造函數(shù)的原型對(duì)象，是聲明原型的構(gòu)造函數(shù)，不管是對(duì)象還是函數(shù)，都有一個(gè)隱式屬性用來(lái)構(gòu)成一條完整原型鏈的指向。思考說(shuō)到原型，不得不提到原型鏈,js中不管是對(duì)象還是方法（也是對(duì)象）都有個(gè)隱藏屬性_proto_，來(lái)表示原型鏈的下一個(gè)指向，一般對(duì)象是指向Object.prototype,方法是指向Function.prototype,構(gòu)造函數(shù)new出來(lái)...

Pocher 2019-08-22 15:59 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類(lèi)概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類(lèi)、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類(lèi)概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類(lèi)、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類(lèi)概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類(lèi)、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 評(píng)論0 收藏0