原型與原型鏈

? ?在JavaScript中,每個(gè)實(shí)例對(duì)象( object )都有一個(gè)私有屬性(稱之為 _ proto _ )指向它的構(gòu)造函數(shù)的原型對(duì)象(prototype )。該原型對(duì)象也有一個(gè)自己的原型對(duì)象( _ proto _ ) ,層層向上直到一個(gè)對(duì)象的原型對(duì)象為 null。根據(jù)定義,null 沒(méi)有原型,并作為這個(gè)原型鏈中的最后一個(gè)環(huán)節(jié)。
定義一個(gè)構(gòu)造函數(shù):

function Cat(name){
    this.name = name;
    this.color = "white";
}

生成一個(gè)Cat實(shí)例

var Cat1 = new Cat("mimi")

??現(xiàn)在構(gòu)造函數(shù)Cat()就是對(duì)象Cat1的原型,Cat()里的this關(guān)鍵字就是指Cat1這個(gè)對(duì)象。現(xiàn)在Cat1這個(gè)對(duì)象有自己的屬性,跟Cat()已經(jīng)再?zèng)]有聯(lián)系了,每個(gè)new出來(lái)的實(shí)例都有自己的屬性和方法,更改其中一個(gè)不會(huì)影響其他的實(shí)例。

var Cat2 = new Cat("fanfan")
var Cat3 = new Cat("Vision")

Cat3.color = "black"

console.log(Cat2.color)  //"white"
console.log(Cat3.color)  //"black"

??這樣每個(gè)實(shí)例中都有一個(gè)color屬性,會(huì)浪費(fèi)內(nèi)存資源。所以JS之父就決定給每個(gè)構(gòu)造函數(shù)設(shè)一個(gè)prototype屬性,prototype屬性指向原型對(duì)象。原型對(duì)象里面存放著所有實(shí)例對(duì)象的公有屬性和方法。所以實(shí)例對(duì)象的屬性和方法一般分為兩種:一種是自身的,一種是引用自prototype的。js里完全依靠"原型鏈"(prototype chain)模式來(lái)實(shí)現(xiàn)繼承。
繼承實(shí)現(xiàn)方式:
為了實(shí)現(xiàn)繼承,proto會(huì)指向上一層的原型對(duì)象,而上一層的結(jié)構(gòu)依然類似,那么就利用proto一直指向Object的原型對(duì)象上!Object.prototype.__ proto __ = null;表示到達(dá)最頂端。如此形成了原型鏈繼承。
圖解:


原型鏈關(guān)系圖.png

參考鏈接:
http://www.itdecent.cn/p/f30fa27999e3
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容