从实现角度分析js原型链

CompileYouth 发布于2019-08-20 19:04 / 2313人阅读

摘要：从实现角度分析原型链欢迎来我的博客阅读从实现角度分析原型链网上介绍原型链的优质文章已经有很多了，比如说作为补充，就让我们换个角度，从实现来分析一下吧本文假设你对原型链已经有所了解。

从实现角度分析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原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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