博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对于原型链的彻底理解
阅读量:6591 次
发布时间:2019-06-24

本文共 1865 字,大约阅读时间需要 6 分钟。

先看以下代码,下面这两个运算返回的结果是一样的:

Function instanceof Object;//trueObject instanceof Function;//true复制代码

这个是怎么一回事呢?要从运算符instanceof说起。

一、instanceof究竟是运算什么的?

我曾经简单理解instanceof只是检测一个对象是否是另个对象new出来的实例(例如var a = new Object(),a instanceof Object返回true),但实际instanceof的运算规则上比这个更复杂。

首先w3c上有官方解释(传送门,有兴趣的同学可以去看看),但是一如既往地让人无法一目了然地看懂……

知乎上有同学把这个解释翻译成人能读懂的语言(传送门),看起来似乎明白一些了:

//假设instanceof运算符左边是L,右边是RL instanceof R //instanceof运算时,通过判断L的原型链上是否存在R.prototypeL.__proto__.__proto__ ..... === R.prototype ?复制代码

//如果存在返回true 否则返回false 注意:instanceof运算时会递归查找L的原型链,即L.proto.proto.proto.proto...直到找到了或者找到顶层为止。

所以一句话理解instanceof的运算规则为:

instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型。

二、图解构造器Function和Object的关系

图解构造器Function和Object的关系

我们再配合代码来看一下就明白了:

//①构造器Function的构造器是它自身Function.constructor=== Function;//true//②构造器Object的构造器是Function(由此可知所有构造器的constructor都指向Function)Object.constructor === Function;//true//③构造器Function的__proto__是一个特殊的匿名函数function() {}console.log(Function.__proto__);//function() {}//④这个特殊的匿名函数的__proto__指向Object的prototype原型。Function.__proto__.__proto__ === Object.prototype//true//⑤Object的__proto__指向Function的prototype,也就是上面③中所述的特殊匿名函数Object.__proto__ === Function.prototype;//trueFunction.prototype === Function.__proto__;//true复制代码

三、当构造器Object和Function遇到instanceof

我们回过头来看第一部分那个“奇怪的现象”,从上面那个图中我们可以看到:

Function.__proto__.__proto__ === Object.prototype;//trueObject.__proto__ === Function.prototype;//true复制代码

所以再看回第一点中我们说的instanceof的运算规则,Function instanceof Object 和 Object instanceof Function运算的结果当然都是true啦!

如果看完以上,你还觉得上面的关系看晕了的话,只需要记住下面几个最重要的关系,其他关系就可以推导出来了:

  1. 所有的构造器的constructor都指向Function

  2. Function的prototype指向一个特殊匿名函数,而这个特殊匿名函数的__proto__指向Object.prototype

  3. 原型链顶端是Object.prototype

  4. 构造函数创建的对象(Object、Function、Array、普通对象等)都是Function的实例,它们的__proto__均指向Function.prototype

  5. 除了Object,所有对象(或叫构造函数)的prototype,均继承自Object.prototype

转载于:https://juejin.im/post/5ccffb48f265da03a85ad45c

你可能感兴趣的文章
南开大学提出新物体分割评价指标,相比经典指标错误率降低 69.23%
查看>>
初创公司MindMaze研发情绪反应VR,让VR关怀你的喜怒哀乐
查看>>
绕开“陷阱“,阿里专家带你深入理解C++对象模型的特殊之处
查看>>
ElasticSearch
查看>>
9-51单片机ESP8266学习-AT指令(测试TCP服务器--51单片机程序配置8266,C#TCP客户端发信息给单片机控制小灯的亮灭)...
查看>>
香港设计师带来仿生机器人,其身体 70% 构造均由3D打印完成
查看>>
不规则物体形状匹配综述
查看>>
自动化设计-框架介绍 TestCase
查看>>
CJ看showgirl已经out!VR体验才是王道
查看>>
postgresql 数组类型
查看>>
Vue+Webpack常见问题(持续更新)
查看>>
栈与递归的实现
查看>>
Manually Summarizing EIGRP Routes
查看>>
spring boot 1.5.4 整合webService(十五)
查看>>
modsecurity(尚不完善)
查看>>
获取.propertys文件获取文件内容
查看>>
Redis3.0.5配置文件详解
查看>>
Know about Oracle RAC Heartbeat
查看>>
JQuery——实现Ajax应用
查看>>
前端05.js入门之BOM对象与DOM对象。
查看>>