一张图看懂 Function 和 Object 的关系及简述 instanceof 运算符

6,355 阅读2分钟

我在写一篇图解 prototype__proto__ 的区别时,搜资料搜到了一个有意思的现象,下面这两个运算返回的结果是一样的:

Function instanceof Object;//true
Object instanceof Function;//true

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

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

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

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

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

//假设instanceof运算符左边是L,右边是R
L instanceof R //instanceof运算时,通过判断L的原型链上是否存在R.prototype
L.__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;//true
Function.prototype === Function.__proto__;//true

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

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

Function.__proto__.__proto__ === Object.prototype;//true
Object.__proto__ === Function.prototype;//true

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

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

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

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

至于 prototype__proto__ 的关系如何推导,可以参考我写的上一篇博客《三张图搞懂JavaScript的原型对象与原型链