ECMAScript7规范中的instanceof操做符

本文主要讲解ECMAScript7规范中的instanceof操做符。

预备知识

有名的Symbols

“有名”的Symbols指的是内置的符号，它们定义在Symbol对象上。ECMAScript7中使用了@@name的形式引用这些内置的符号，好比下面会提到的@@hasInstance，其实就是Symbol.hasInstance。

InstanceofOperator(O, C)

O instanceof C在内部会调用InstanceofOperator(O, C)抽象操做，该抽象操做的步骤以下：

1. 若是C的数据类型不是对象，抛出一个类型错误的异常；
2. 让instOfHandler等于GetMethod(C, @@hasInstance)，大概语义就是获取对象C的@@hasInstance属性的值；

3. 若是instOfHandler的值不是undefined，那么：

   1. 返回ToBoolean(? Call(instOfHandler, C, « O »))的结果，大概语义就是执行instOfHandler(O)，而后把调用结果强制转化为布尔类型返回。
4. 若是C不能被调用，抛出一个类型错误的异常；
5. 返回OrdinaryHasInstance(C, O)的结果。

OrdinaryHasInstance(C, O)

OrdinaryHasInstance(C, O)抽象操做的步骤以下：

1. 若是C不能被调用，返回false；

2. 若是C有内部插槽[[BoundTargetFunction]]，那么：

   1. 让BC等于C的内部插槽[[BoundTargetFunction]]的值；
   2. 返回InstanceofOperator(O, BC)的结果；
3. 若是O的类型不是对象，返回false；
4. 让P等于Get(C, "prototype")，大概语义是获取C.prototype的值；
5. 若是P的数据类型不是对象，抛出一个类型错误的异常；

6. 重复执行下述步骤：

   1. 让O等于O.[[GetPrototypeOf]]()的结果，大概语义就是获取O的原型对象；
   2. 若是O等于null，返回false；
   3. 若是SameValue(P, O)的结果是true，返回true。

SameValue抽象操做参见JavaScript中的==，===和Object.js()中的Object.is()，Object.is()使用的就是这个抽象操做的结果。

由上述步骤2可知，若是C是一个bind函数，那么会从新在C绑定的目标函数上执行InstanceofOperator(O, BC)操做。

由上述步骤6可知，会重复地获取对象O的原型对象，而后比较该原型对象和C的prototype属性是否相等，直到相等返回true，或者O变为null，也就是遍历完整个原型链，返回false。

Function.prototype[@@hasInstance](V)

由上面的InstanceofOperator(O, C)抽象操做的步骤2和3能够知道，若是C上面定义或继承了@@ hasInstance属性的话，会调用该属性的值，而不会走到步骤4和5。步骤4和5的目的是为了兼容没有实现@@hasInstance方法的浏览器。若是一个函数没有定义或继承@@hasInstance属性，那么就会使用默认的instanceof的语义，也就是OrdinaryHasInstance(C, O)抽象操做描述的步骤。

ECMAScript7规范中，在Function的prototype属性上定义了@@hasInstance属性。Function.prototype[@@hasInstance](V)的步骤以下：

1. 让F等于this值；
2. 返回OrdinaryHasInstance(F, V)的结果。

因此，你能够看到在默认状况下，instanceof的语义是同样的，都是返回OrdinaryHasInstance(F, V)的结果。为何说默认状况下？由于你能够覆盖Function.prototype[@@hasInstance]方法，去自定义instanceof的行为。

例子

function A () {}
function B () {}

var a = new A
a.__proto__ === A.prototype // true
a.__proto__.__proto__ === Object.prototype // true
a.__proto__.__proto__.__proto__ === null // true

a instanceof A // true
a instanceof B // false

由OrdinaryHasInstance(C, O)的第6步可知：

• 对于a instanceof A，P是A.prototype，在第一次循环的时候，a的原型对象a._proto__是A.prototype，也就是步骤中的O是A.prototype，因此返回了true；
• 对于a instanceof B，P是B.prototype，在第一次循环的时候，a的原型对象a._proto__是A.prototype，不等于P；执行第二次循环，此时O是a.__proto__.__proto__，也就是Object.prototype，不等于P；执行第三次循环，此时O是a.__proto__.__proto__.__proto__，也就是null，也就是原型链都遍历完了，因此返回了false。

接着上面的例子：

A.prototype.__proto__ = B.prototype

a.__proto__ === A.prototype // true
a.__proto__.__proto__ === B.prototype // true
a.__proto__.__proto__.__proto__ === Object.prototype // true
a.__proto__.__proto__.__proto__.__proto__ === null // true

a instanceof B // true

在上面的例子中，咱们把B.prototype设置成了a的原型链中的一环，这样a instanceof B在OrdinaryHasInstance(C, O)的第6步的第2次循环的时候，返回了true。

由OrdinaryHasInstance(C, O)的第2步，咱们知道bind函数的行为和普通函数的行为是不同的：

function A () {}
var B = A.bind()

B.prototype === undefined // true

var b = new B
b instanceof B // true
b instanceof A // true

由上面的例子可知，B.prototype是undefined。因此，instanceof做用于bind函数的返回结果实际上是做用于绑定的目标函数的返回值，和bind函数基本上没有什么关系。

由InstanceofOperator(O, C)步骤2和步骤3可知，咱们能够经过@@hasInstance属性来自定义instanceof的行为：

function A () {}
var a = new A
a instanceof A // true

A[Symbol.hasInstance] = function () { return false }
a instanceof A // ?

在chrome浏览器测试了一下，发现仍是输出true。而后看了一下ECMAScript6的文档，ECMAScript6文档里面尚未规定能够经过@@hasInstance改变instanceof的行为，因此应该是目前chrome浏览器尚未实现ECMAScript7中的instanceof操做符的行为。

直到有一天看了MDN上Symbol.hasInstance的兼容性部分，发现chrome从51版本就开始支持Symbol.hasInstance了：

class MyArray {  
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance)
  }
}
console.log([] instanceof MyArray) // true

那么为何我那样写不行呢？直到我发现：

function A () {}
var fun = function () {return false}
A[Symbol.hasInstance] = fun
A[Symbol.hasInstance] === fun // false
A[Symbol.hasInstance] === Function.prototype[Symbol.hasInstance] // true
A[Symbol.hasInstance] === A.__proto__[Symbol.hasInstance] // true

由上面的代码可知，A[Symbol.hasInstance]并无赋值成功，并且始终等于Function.prototype[Symbol.hasInstance]，也就是始终等于A的原型上的Symbol.hasInstance方法。那是否是由于原型上的同名方法？

Object.getOwnPropertyDescriptor(Function.prototype, Symbol.hasInstance)
// Object {writable: false, enumerable: false, configurable: false, value: function}

由上面的代码可知，Function.prototype上的Symbol.hasInstance的属性描述符的writable是false，也就是这个属性是只读的，因此在A上面添加Symbol.hasInstance属性失败了。可是为啥没有失败的提示呢？

'use strict'
function A () {}
var fun = function () {return false}
A[Symbol.hasInstance] = fun
// Uncaught TypeError: Cannot assign to read only property 'Symbol(Symbol.hasInstance)' of function 'function A() {}'

错误提示出来了，因此之后仍是尽可能使用严格模式。非严格模式下有些操做会静默失败，也就是即便操做失败了也不会有任何提示，致使开发人员认为操做成功了。

var a = {}
a[Symbol.hasInstance] = function () {return true}
new Number(3) instanceof a // true

由于能够经过自定义Symbol.hasInstance方法来覆盖默认行为，因此用instanceof操做符判断数据类型并不必定是可靠的。

还有一个问题：为何上面MDN文档的例子能够成功，我最初的例子就不行呢，目的不都是写一个构造函数，而后在构造函数上添加一个属性吗？
我的分析的结果是：虽然你们都说Class是写构造函数的一个语法糖，可是其实仍是和使用function的方式有差异的，就好比上面的例子。使用Class的时候，会直接在构造函数上添加一个静态属性，不会先检查原型链上是否存在同名属性。而使用function的方式的时候，给构造函数添加一个静态方法，至关于给对象赋值，赋值操做会先检查原型链上是否存在同名属性，因此就会有赋值失败的风险。因此，就给构造函数添加Symbol.hasInstance属性来讲，Class能作到，使用Function的方式就作不到。

更新于2018/11/20
上面总结到：

因此，就给构造函数添加 Symbol.hasInstance属性来讲， Class能作到，使用 Function的方式就作不到。

可是，给对象添加属性除了直接赋值以外，还可使用Object.defineProperty方法：

function A () {}
var a = new A
a instanceof A // true

Object.defineProperty(A, Symbol.hasInstance, {
    value: function () { return false }
})
a instanceof A // false

使用Object.defineProperty方法添加或者修改对象属性的时候不会检查原型链，因此就能够成功了。因此上面的总结也就不成立了，也就是：

因此，就给构造函数添加 Symbol.hasInstance属性来讲， Class能作到，使用 Function的方式 也能够作到。

总结

本文主要讲解ECMAScript7规范中的instanceof操做符，但愿你们能有所收获。若是本文有什么错误或者不严谨的地方，欢迎在评论区留言。