從實(shí)現(xiàn)角度分析js原型鏈
歡迎來(lái)我的博客閱讀：《從實(shí)現(xiàn)角度分析js原型鏈》
網(wǎng)上介紹原型鏈的優(yōu)質(zhì)文章已經(jīng)有很多了，比如說(shuō)：
作為補(bǔ)充，就讓我們換個(gè)角度，從實(shí)現(xiàn)來(lái)分析一下吧
ps: 本文假設(shè)你對(duì)原型鏈已經(jīng)有所了解。如不了解，建議先看上面兩篇文章
畫(huà)個(gè)圖
第一步
創(chuàng)建一個(gè)函數(shù)時(shí)，會(huì)創(chuàng)建兩個(gè)對(duì)象：函數(shù)本身和它的原型對(duì)象
所以我們可以先畫(huà)個(gè)這樣的關(guān)系圖：
ps: 圓形代表函數(shù)，矩形代表對(duì)象
第二步
通過(guò)函數(shù)創(chuàng)建的對(duì)象，其原型是函數(shù)的原型對(duì)象
再修改下關(guān)系圖：
第三步
函數(shù)的原型對(duì)象的原型是 Object 的原型對(duì)象
再修改下關(guān)系圖：
第四步
js的內(nèi)置函數(shù)對(duì)象也滿(mǎn)足這個(gè)規(guī)律
再修改下關(guān)系圖：
第五步
Function 的原型對(duì)象是一個(gè)函數(shù)
再修改下關(guān)系圖：
第六步
所有函數(shù)的原型都相同，都為 Function 的原型對(duì)象
再修改下關(guān)系圖：
第七步
Object 的原型對(duì)象的原型是 null 意為不應(yīng)該存在
最后得到如下關(guān)系圖：
一些疑問(wèn)
instanceof
Object instanceof Function // true
Function instanceof Object // true
首先需要確定的是，instanceof 運(yùn)算符相當(dāng)于如下代碼:
// L instanceof R
function instance_of(L, R) {
var O = R.prototype; // 取函數(shù) R 的原型對(duì)象
L = L.__proto__; // 取對(duì)象 L 的原型
while (true) { // 遍歷原型鏈
if (L === null)
return false;
if (O === L) // 函數(shù) R 的原型對(duì)象在對(duì)象 L 的原型鏈上
return true;
L = L.__proto__;
}
}
對(duì)于 Object instanceof Function 來(lái)說(shuō)，就相當(dāng)于 Object.__proto__ === Function.prototype
因?yàn)樗泻瘮?shù)的原型都是 Function 的原型對(duì)象，所以是 true
對(duì)于 Function instanceof Object 來(lái)說(shuō)，就相當(dāng)于 Function.__proto__ === Object.prototype
因?yàn)?Object 的原型對(duì)象處于原型鏈的頂部，所以 Object.prototype 一定在 Function 的原型鏈上，為 true
Function
Function.__proto__ === Function.prototype
對(duì)于這個(gè)，可以先把上面的關(guān)系圖變形一下：
可以看出：
- 所有函數(shù)都有與之對(duì)應(yīng)的原型對(duì)象
- 所有函數(shù)的原型都是
Function.prototype -
Object.prototype位于原型鏈的頂部，在所有對(duì)象的原型鏈上
根據(jù) 1 和 2，就可以得出 Function.__proto__ === Function.prototype
至于 Function.prototype 為什么是函數(shù)，可以先看看下面這個(gè)例子：
可以看出，Array.prototype 是 Array 類(lèi)型，Map.prototype 是 Map 類(lèi)型，Set.prototsype 是 Set 類(lèi)型
所以，為了保持一致性，Function.prototype 也應(yīng)該是 Function 類(lèi)型
End
參考：
- https://github.com/mqyqingfeng/Blog/issues/2
- https://github.com/creeperyang/blog/issues/9
- https://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/index.html
- https://stackoverflow.com/questions/7688902/what-is-functions-proto
- https://stackoverflow.com/questions/572897/how-does-javascript-prototype-work
