從實現角度分析js原型鏈

CompileYouth 發布于2019-08-20 19:04 / 2388人閱讀

摘要：從實現角度分析原型鏈歡迎來我的博客閱讀從實現角度分析原型鏈網上介紹原型鏈的優質文章已經有很多了，比如說作為補充，就讓我們換個角度，從實現來分析一下吧本文假設你對原型鏈已經有所了解。

從實現角度分析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

GPU云服務器云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85094.html

[學習筆記] 小角度看JS原型鏈

摘要：雖然在腳本中沒有標準的方式訪問，但在每個對象上都支持一個屬性，用于訪問其構造函數的原型對象。說的是構造函數和原型對象之間的關系，說的是實例對象和原型對象之間的關系。前言在 segmentfault 上看到這樣一道題目： var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

Cciradih 2019-08-21 10:39 評論0 收藏0
進擊JavaScript之（二）詞法作用域與作用域鏈

摘要：一作用域域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。概括的說作用域就是一套設計良好的規則來存儲變量，并且之后可以方便地找到這些變量。一、作用域域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。想了解更多關于作用域的問題推薦閱讀《你不知道的JavaScript上卷》第一章（或第一部分），從編譯原理的角度說明什么是作用域。概...

denson 2019-08-20 10:21 評論0 收藏0
高性能的網頁開發概要

摘要：或者說一直以來我是缺乏開發高性能網頁的意識的，但是想做一個好的前端開發者，是需要在當自己編寫的程序慢慢復雜以后還能繼續保持網頁的高性能的。不知道有多少人和我一樣，在以前的開發過程中很少在乎自己編寫的網頁的性能。或者說一直以來我是缺乏開發高性能網頁的意識的，但是想做一個好的前端開發者，是需要在當自己編寫的程序慢慢復雜以后還能繼續保持網頁的高性能的。這需要我們對JavaScript語句，...

bovenson 2019-08-20 13:49 評論0 收藏0
JS中的原型鏈和原型的認識

摘要：在上面的各種原型的變換中，其實難點就在于構造函數也是對象原型對象等所有對象都由構造這四個點。這篇文章主要是學習一下JavaScript中的難點------原型和原型鏈自定義一個對象我們學習一門編程語言，必然要使用它完成一些特定的功能，而面向對象的語言因為符合人類的認知規律，在這方面做得很好，今天我以JS為例，探索一下JS不同于其他面向對象的語言的地方-------原型和原型鏈首...

Juven 2019-08-01 18:25 評論0 收藏0