一文讀懂JavaScript原型鏈
前言
什么是原型鏈
每個(gè)對(duì)象（Object）都有一個(gè)私有屬性指向另一個(gè)名為原型（prototype）的對(duì)象。原型對(duì)象也有一個(gè)自己的原型，層層向上直到一個(gè)對(duì)象的原型為 null。根據(jù)定義，null 沒(méi)有原型，并作為這個(gè)原型鏈（prototype chain）中的最后一個(gè)環(huán)節(jié)。
說(shuō)明
- __proto__實(shí)際為[[Prototype]]屬性的訪問(wèn)器，為了便于理解，本文以屬性代稱(chēng)其訪問(wèn)器實(shí)質(zhì)
- 這里不使用class表達(dá)式是因?yàn)閏lass表達(dá)式實(shí)際上是特殊的函數(shù)，更類(lèi)似于將多個(gè)操作融合后的語(yǔ)法糖。使用Function來(lái)理解更為直觀
- 所有代碼均已在Chrome瀏覽器v125.0.6422.142經(jīng)過(guò)結(jié)果驗(yàn)證
一、名詞解釋
在開(kāi)始了解原型鏈之前，先介紹兩個(gè)名詞prototype以及__proto__，舉一個(gè)簡(jiǎn)單的例子更為直觀
定義一個(gè)函數(shù)Foo，而后創(chuàng)建一個(gè)Foo的實(shí)例對(duì)象o1。
function Foo(){}
const o1 = new Foo()（一）、原型對(duì)象(prototype)
[!NOTE]
所有的函數(shù)都是對(duì)象，擁有獨(dú)有屬性prototype
prototype原型對(duì)象，是函數(shù)的獨(dú)有屬性。該屬性指向一個(gè)對(duì)象。當(dāng)函數(shù)（如：Foo）被實(shí)例化成一個(gè)對(duì)象（如：o1）后，實(shí)例對(duì)象（o1）可以訪問(wèn)到函數(shù)（Foo）的原型對(duì)象(prototype)
如：在Foo的prototype上增加屬性propA，其值為'p1'，可以發(fā)現(xiàn)在o1上也可以獲取到屬性propA，其值同樣為'p1'
Foo.prototype.propA = 'p1'
o1.propA // 'p1'那么o1是如何獲取到Foo.prototype上的方法的呢，這就要介紹另一個(gè)概念，隱式原型__proto__
（二）、隱式原型(__proto__)
[!Note]
所有非內(nèi)置對(duì)象都是函數(shù)的實(shí)例，擁有獨(dú)有屬性__proto__
__proto__隱式原型，是對(duì)象的獨(dú)有屬性。對(duì)象（如：o1）的__proto__屬性指向其構(gòu)造函數(shù)（如：Foo）的原型對(duì)象( prototype )。所有非內(nèi)置對(duì)象都是函數(shù)的實(shí)例，同時(shí)擁有一個(gè)構(gòu)造函數(shù)。如：對(duì)象o1的構(gòu)造函數(shù)為Foo
內(nèi)置對(duì)象如：Function、Date、Array、Object、Math、JSON等。
如：o1上訪問(wèn)到的屬性propA實(shí)際上是其構(gòu)造函數(shù)Foo的prototype的屬性propA。這里將Foo.prototype.propA設(shè)置為一個(gè)對(duì)象，來(lái)防止因基本類(lèi)型的值比較方式導(dǎo)致結(jié)論誤差
o1.constructor === Foo // true
Foo.prototype.propA = {}
o1.propA // {}
o1.propA === o1.__proto__.propA // true
o1.__proto__.propA === Foo.prototype.propA // true二、原型鏈
在介紹何為prototype以及__proto__后，接下來(lái)就開(kāi)始介紹原型鏈了。仍以之前使用的例子來(lái)進(jìn)行原型鏈的介紹
function Foo(){}
const o1 = new Foo()（一）、實(shí)例化關(guān)系
首先一起來(lái)分析例子的實(shí)例化關(guān)系。可在Chrome中測(cè)試如下代碼
o1.constructor === Foo // true
Foo.constructor === Function // true
Function.constructor === Function // true根據(jù)驗(yàn)證結(jié)果可分析出如下圖結(jié)論
圖片
- o1的數(shù)據(jù)類(lèi)型是對(duì)象，是函數(shù)Foo的實(shí)例化
- Foo的數(shù)據(jù)類(lèi)型既是函數(shù)也是對(duì)象，也是Function的實(shí)例化
- Function既是函數(shù)也是對(duì)象，其是自身Function的實(shí)例化
（二）、獨(dú)有屬性分析
在實(shí)例化關(guān)系的基礎(chǔ)上，繼續(xù)分析每一級(jí)的屬性關(guān)系。其中綠色代表函數(shù)獨(dú)有屬性，紅色代表對(duì)象獨(dú)有屬性
圖片
- o1的數(shù)據(jù)類(lèi)型為對(duì)象，擁有獨(dú)有屬性__proto__，由于prototype是函數(shù)獨(dú)有屬性，所以o1上的prototype為undefined
- Foo的數(shù)據(jù)類(lèi)型既是函數(shù)也是對(duì)象，所以其同時(shí)擁有屬性prototype和__proto__
- Function的數(shù)據(jù)類(lèi)型既是函數(shù)也是對(duì)象，所以其同時(shí)擁有屬性prototype和__proto__
（三）、隱式原型引用關(guān)系
[!NOTE]
對(duì)象的隱式原型(__proto__)屬性指向其構(gòu)造函數(shù)(constructor)的原型對(duì)象(prototype)
圖片
- o1.__proto__指向其構(gòu)造函數(shù)Foo的原型對(duì)象( prototype )
- Foo.__proto__的指向其構(gòu)造函數(shù)Function的原型對(duì)象( prototype )
- 由于Function的構(gòu)造函數(shù)是其自身，所以Function.__proto__指向其自身的原型對(duì)象( prototype )
由于函數(shù)的原型對(duì)象( prototype )屬性的數(shù)據(jù)類(lèi)型為對(duì)象，因此同樣具有對(duì)象的獨(dú)有屬性__proto__。如下圖
圖片
默認(rèn)情況下，對(duì)象隱式原型( __proto__ )指向其構(gòu)造函數(shù)的原型對(duì)象( prototype )，那么Foo.prototype和Function.prototype的構(gòu)造函數(shù)有指向哪里呢？
[!NOTE]
所有函數(shù)的原型對(duì)象( prototype )的構(gòu)造函數(shù)均指向其自身
可通過(guò)以下測(cè)試代碼進(jìn)行驗(yàn)證
Foo.prototype.constructor === Foo // true
Function.prototype.constructor === Function // true內(nèi)置函數(shù)對(duì)象的原型對(duì)象( prototype )，其隱式原型( __proto__ )也指向其自身
RegExp.prototype.constructor === RegExp // true
Date.prototype.constructor === Date // true
Map.prototype.constructor === Map // true
Array.prototype.constructor === Array // true
Number.prototype.constructor === Number // true
Object.prototype.constructor === Object // true然而一些內(nèi)置對(duì)象由于其沒(méi)有函數(shù)特征，所以其原型對(duì)象( prototype )屬性為undefined，其自身的constructor指向Object。
Math.prototype // undefined
Math.constructor === Object // true
JSON.prototype // undefined
JSON.constructor === Object // true言歸正傳，由于所有函數(shù)的原型對(duì)象( prototype )的構(gòu)造函數(shù)均為其自身，則如若Foo.prototype.__proto__指向其構(gòu)造函數(shù)的prototype，即Foo.prototype.__proto__指向Foo.prototype。那么原型鏈的查找將進(jìn)入無(wú)限循環(huán)。為了避免這個(gè)問(wèn)題，則將所有函數(shù)原型對(duì)象( prototype )的隱式原型(__proto__)均指向Object.prototype。
圖片
可通過(guò)以下代碼進(jìn)行驗(yàn)證：
Foo.prototype.__proto__ === Object.prototype // true
Function.prototype.__proto__ === Object.prototype // true這里欠缺的有兩個(gè)點(diǎn)：
- Object既是函數(shù)也是對(duì)象，所以其擁有對(duì)象的獨(dú)有屬性( __proto__ )，那么其隱式原型( __proto__ )指向哪里
- Object.prototype的數(shù)據(jù)類(lèi)型為一個(gè)對(duì)象，如果其隱式原型( __proto__ )仍指向Object.prototype，那么原型鏈的查找將進(jìn)入無(wú)限循環(huán)，那么其指向哪里
圖片
針對(duì)第1點(diǎn)，Object自身既是函數(shù)又是對(duì)象，其作為對(duì)象的獨(dú)有屬性隱式原型( __proto__ )應(yīng)指向其構(gòu)造函數(shù)的原型對(duì)象( prototype )。Object對(duì)象的構(gòu)造函數(shù)為Function，所以其隱式原型( __proto__ )指向Function.prototype。
可通過(guò)以下測(cè)試代碼進(jìn)行驗(yàn)證：
Object.constructor === Function // true
Object.__proto__ === Function.prototype // true因此其指向關(guān)系如下圖：
圖片
針對(duì)第2點(diǎn)，文章起始什么是原型鏈已經(jīng)給出了定義。
原型對(duì)象也有一個(gè)自己的原型，層層向上直到一個(gè)對(duì)象的原型為 null
因此其最終指向?yàn)閚ull
圖片
三、總結(jié)：
對(duì)象通過(guò)隱式原型( __proto__ )屬性指向其構(gòu)造函數(shù)的原型對(duì)象( prototype )，進(jìn)而通過(guò)原型對(duì)象( prototype )的隱式原型( __proto__ )屬性指向更高層級(jí)的原型對(duì)象( prototype )，最終指向null而停止所形成的鏈條，則稱(chēng)其為原型鏈。
