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