用小豬佩奇說明Javascript的原型和原型鏈

vibiu 發(fā)布于2019-08-26 11:59 / 2124人閱讀

摘要：它指向構(gòu)造函數(shù)的原型對(duì)象這是原型對(duì)象上的一個(gè)指向構(gòu)造函數(shù)的屬性。先看代碼的構(gòu)造函數(shù)創(chuàng)建一個(gè)的實(shí)例，小豬佩奇敲黑板，劃重點(diǎn)，理解這一句整個(gè)問題的關(guān)鍵，請(qǐng)多重復(fù)幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個(gè)樣子。

??沒錯(cuò)，我就是標(biāo)題黨！你已經(jīng)成功被我騙進(jìn)來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。

??Javascript的原型是這門語言的一個(gè)重點(diǎn)和難點(diǎn)。看過很多大佬寫的解釋Javascript原型的文章，但是很多對(duì)于初學(xué)者其實(shí)不是很友好，看完之后還是云里霧里。我雖然不敢說能把這個(gè)東西解釋的很清楚，但是作為一個(gè)前端菜鳥，我可能更知道大家在讀文章的時(shí)候會(huì)卡在哪一步，所以希望本文能夠幫助到大家。

??在文章開始，我先明確幾個(gè)概念，這里如果你覺得不好理解，就先牢牢地記住它，然后繼續(xù)往下閱讀，讀完你就會(huì)豁然開朗，相信我！另外，一定要每行每字去讀，勿跳著讀，博主就犯過這樣的錯(cuò)誤，導(dǎo)致越讀越糊涂，我這里也盡量壓縮字?jǐn)?shù)，保證你讀的每個(gè)字都是有用的。答：“你都忽悠半天了趕緊開始吧！”

prototype ：每個(gè)函數(shù)都會(huì)有這個(gè)屬性，這里強(qiáng)調(diào)，是函數(shù)，普通對(duì)象是沒有這個(gè)屬性的（這里為什么說普通對(duì)象呢，因?yàn)镴S里面，一切皆為對(duì)象，所以這里的普通對(duì)象不包括函數(shù)對(duì)象）。它是構(gòu)造函數(shù)的原型對(duì)象；

__proto__ ：每個(gè)對(duì)象都有這個(gè)屬性,，這里強(qiáng)調(diào)，是對(duì)象，同樣，因?yàn)楹瘮?shù)也是對(duì)象，所以函數(shù)也有這個(gè)屬性。它指向構(gòu)造函數(shù)的原型對(duì)象；

constructor ：這是原型對(duì)象上的一個(gè)指向構(gòu)造函數(shù)的屬性。

先看代碼

// Pig的構(gòu)造函數(shù)
function Pig(name, age) {
    this.name = name;
    this.age = age;
}
// 創(chuàng)建一個(gè)Pig的實(shí)例，小豬佩奇
var Peppa = new Pig("Peppa", 5);

敲黑板，劃重點(diǎn)，理解這一句整個(gè)問題的關(guān)鍵，請(qǐng)多重復(fù)幾遍。：在實(shí)例化的時(shí)候，prototype上的屬性會(huì)作為原型對(duì)象賦值給實(shí)例。 也就是說小豬佩奇的原型，就是從Pig.prototype繼承來的寫成代碼就是這個(gè)樣子Peppa.__proto__ === Pig.prototype。

Pig是一個(gè)函數(shù)對(duì)象，它是Function對(duì)象的一個(gè)實(shí)例，所以Pig.__proto__ === Function.prototype一定為true。

我們?cè)谏厦嫣岬搅薱onstructor這個(gè)屬性，它位于原型對(duì)象上并且指向構(gòu)造函數(shù)，所以Pig.prototype.constructor === Pig

至此，我大致捋了一遍這三個(gè)屬性的關(guān)系，我們?cè)夙樦@條鏈繼續(xù)往深挖一挖。Function.prototype，也就是Function的原型對(duì)象。這個(gè)原型對(duì)象的__proto__指向了Object.prototype。打破砂鍋問到底，Object.prototype.__proto__又指向誰，JS世界里萬物皆對(duì)象，Object似乎已經(jīng)到了原型鏈的頂端，果然不出我所料，它確實(shí)是null。：

你可能要吐槽了，說好的講明白呢，這一坨都被你繞糊涂了，一張圖勝過千言萬語：

解釋一下上面的圖。先看藍(lán)色那條線，Pig,Function和Object的構(gòu)造函數(shù)是Function的實(shí)例，所以它們的__proto__均指向Function.prototype。這就印證了敲黑板說的那句話，prototype屬性會(huì)作為原型對(duì)象賦值給實(shí)例，每個(gè)對(duì)象的__proto__都指向原型對(duì)象（處于最頂層的Object.prototype除外）。

再看綠色那條，Pig和Function的原型對(duì)象是Object的實(shí)例，所以它們的__proto__均指向了Object.prototype，也就是Object的原型對(duì)象。

淺藍(lán)色的線表明了原型的constructor指向了構(gòu)造函數(shù)。

Emmmm，其實(shí)也沒那么復(fù)雜對(duì)不對(duì)？接著說一下原型鏈。正如你在上面圖中所看到的，JS在創(chuàng)建對(duì)象的時(shí)候，會(huì)在新對(duì)象上產(chǎn)生一個(gè)__proto__的屬性，這個(gè)屬性指向了它構(gòu)造函數(shù)的原型的prototype。由此一級(jí)一級(jí)向上直到到達(dá)Object.prototype.__proto__ === null的這個(gè)鏈條我們稱之為原型鏈。

關(guān)于繼承的概念，本來想寫在一起的，后來想想，內(nèi)容過多只會(huì)讓文章成為收藏不看系列，所以這塊的內(nèi)容放在以后的文章里詳解。各位看官，我想我大致講明白了原型和原型鏈的概念，有什么錯(cuò)誤還懇請(qǐng)批評(píng)指正。