从instanceof身上深入理解原型/原型链

栏目: JavaScript · 发布时间: 5年前

内容简介：今天将延续这篇文章，借助一个老朋友——instanceof运算符，将通过它以及结合多次讲的原型/原型链经典图来深入理解原型/原型链。对于原始类型（primitive type）的值，即官方对

今天将延续这篇文章，借助一个老朋友——instanceof运算符，将通过它以及结合多次讲的原型/原型链经典图来深入理解原型/原型链。

对于原始类型（primitive type）的值，即 string / number / boolean ，你可以通过 typeof 判断其类型，但是 typeof 在判断到合成类型（complex type）的值的时候，返回值只有 object / function ，你不知道它到底是一个 object 对象，还是数组，也不能判断出Object 下具体是什么细分的类型，比如 Array 、 Date 、 RegExp 、 Error 等。

官方对 instanceof 运算符的解释是返回一个布尔值，表示对象是否为某个构造函数的实例。比如：

function Foo() {}
var f1 = new Foo();

console.log(f1 instanceof Foo);  // true
console.log(f1 instanceof Object);  // true
复制代码

上面代码中，对象 f1 是构造函数 Foo 的实例，所以返回 true ，但是“f1 instanceof Object”为什么也是 true 呢？

至于为什么等会再解释，先把 instanceof 判断的规则告诉大家。根据以上代码看下图：

instanceof 运算符的左边是实例对象，右边是构造函数，左边变量暂称为A，右边变量暂称为B。它会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。

通俗一点来讲， instanceof 的判断规则是： instanceof 会检查整个原型链，将沿着A的 __proto__ 这条线来一直找，同时沿着B的 prototype 这条线来一直找，直到能找到同一个引用，即同一个对象，那么就返回 true 。如果找到终点还未重合，则返回 false 。即上图中的 f1 --> __proto__ 和 Foo --> prototype 指向同一个对象， console.log(f1 instanceof Foo) 为 true 。

按照以上规则，重新来看看“ f1 instanceof Object ”这句代码为什么是 true ？根据上图很容易就能看出来， f1--> __proto__ --> __proto__ 和 Object --> prototype 指向同一个对象， console.log(f1 instanceof Object) 为 true 。

通过上面的规则，可以很好地解释一些比较怪异的现象，例如：

console.log(Object instanceof Function);   // true
console.log(Function instanceof Object);   // true
console.log(Function instanceof Function);   // true
console.log(Object instanceof Object);   // true
复制代码

这些就是这篇文章所讲的看似很混乱的东西，现在知道为何了吧。

但还有一种特殊情况，就是左边对象的原型链上，只有 null 对象。这时， instanceof 判断会失真。

var obj = Object.create(null);
typeof obj // "object"
Object.create(null) instanceof Object // false
复制代码

上面代码中， Object.create(null) 返回一个新对象 obj ，它的原型是 null （ Object.create 后续会有专门文章介绍）。右边的构造函数 Object 的 prototype 属性，不在左边的原型链上，因此 instanceof 就认为 obj 不是 Object 的实例。但是，只要一个对象的原型不是 null ， instanceof 运算符的判断就不会失真。