從實現角度分析js原型鏈

歡迎來我的博客閱讀：《從實現角度分析js原型鏈》

網上介紹原型鏈的優質文章已經有很多了，比如說：

• https://github.com/mqyqingfeng/Blog/issues/2

• https://github.com/creeperyang/blog/issues/9

作為補充，就讓我們換個角度，從實現來分析一下吧

ps: 本文假設你對原型鏈已經有所了解。如不了解，建議先看上面兩篇文章

畫個圖

第一步

創建一個函數時，會創建兩個對象：函數本身和它的原型對象

所以我們可以先畫個這樣的關系圖：

ps: 圓形代表函數，矩形代表對象

第二步

通過函數創建的對象，其原型是函數的原型對象

再修改下關系圖：

第三步

函數的原型對象的原型是 Object 的原型對象

再修改下關系圖：

第四步

js的內置函數對象也滿足這個規律

再修改下關系圖：

第五步

Function 的原型對象是一個函數

再修改下關系圖：

第六步

所有函數的原型都相同，都為 Function 的原型對象

再修改下關系圖：

第七步

Object 的原型對象的原型是 null 意為不應該存在

最后得到如下關系圖：

一些疑問

instanceof

Object instanceof Function // true Function instanceof Object // true

首先需要確定的是，instanceof 運算符相當于如下代碼:

// L instanceof R function instance_of(L, R) {var O = R.prototype; // 取函數 R 的原型對象L = L.__proto__; // 取對象 L 的原型while (true) { // 遍歷原型鏈if (L === null)return false; if (O === L) // 函數 R 的原型對象在對象 L 的原型鏈上return true; L = L.__proto__; } }

對于 Object instanceof Function 來說，就相當于 Object.__proto__ === Function.prototype

因為所有函數的原型都是 Function 的原型對象，所以是 true

對于 Function instanceof Object 來說，就相當于 Function.__proto__ === Object.prototype

因為 Object 的原型對象處于原型鏈的頂部，所以 Object.prototype 一定在 Function 的原型鏈上，為 true

Function

Function.__proto__ === Function.prototype

對于這個，可以先把上面的關系圖變形一下：

可以看出：

所有函數都有與之對應的原型對象

所有函數的原型都是 Function.prototype

Object.prototype 位于原型鏈的頂部，在所有對象的原型鏈上

根據 1 和 2，就可以得出 Function.__proto__ === Function.prototype

至于 Function.prototype 為什么是函數，可以先看看下面這個例子：

可以看出，Array.prototype 是 Array 類型，Map.prototype 是 Map 類型，Set.prototsype 是 Set 類型

所以，為了保持一致性，Function.prototype 也應該是 Function 類型

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

總結

以上是生活随笔為你收集整理的从实现角度分析js原型链的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。