從實現角度分析js原型鏈

時間 2019-11-08

標籤實現角度分析原型欄目 JavaScript 简体版

原文原文鏈接

從實現角度分析js原型鏈

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

網上介紹原型鏈的優質文章已經有不少了，好比說：html

做爲補充，就讓咱們換個角度，從實現來分析一下吧github

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

畫個圖

第一步

建立一個函數時，會建立兩個對象：函數自己和它的原型對象函數

因此咱們能夠先畫個這樣的關係圖：spa

ps: 圓形表明函數，矩形表明對象prototype

第二步

經過函數建立的對象，其原型是函數的原型對象code

再修改下關係圖：

第三步

函數的原型對象的原型是 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

參考：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。