从实现角度分析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

参考：