摘要：本文主要講解規范中的操作符。由上述步驟可知，如果是一個函數，那么會重新在綁定的目標函數上執行操作。而使用的方式的時候，給構造函數添加一個靜態方法，相當于給對象賦值，賦值操作會先檢查原型鏈上是否存在同名屬性，所以就會有賦值失敗的風險。

本文主要講解ECMAScript7規范中的instanceof操作符。

“有名”的Symbols指的是內置的符號，它們定義在Symbol對象上。ECMAScript7中使用了@@name的形式引用這些內置的符號，比如下面會提到的@@hasInstance，其實就是Symbol.hasInstance。

O instanceof C在內部會調用InstanceofOperator(O, C)抽象操作，該抽象操作的步驟如下：

如果C的數據類型不是對象，拋出一個類型錯誤的異常；

讓instOfHandler等于GetMethod(C, @@hasInstance)，大概語義就是獲取對象C的@@hasInstance屬性的值；

如果instOfHandler的值不是undefined，那么：

返回ToBoolean(? Call(instOfHandler, C, ? O ?))的結果，大概語義就是執行instOfHandler(O)，然后把調用結果強制轉化為布爾類型返回。

如果C不能被調用，拋出一個類型錯誤的異常；

返回OrdinaryHasInstance(C, O)的結果。

OrdinaryHasInstance(C, O)抽象操作的步驟如下：

如果C不能被調用，返回false；

如果C有內部插槽[[BoundTargetFunction]]，那么：

讓BC等于C的內部插槽[[BoundTargetFunction]]的值；

返回InstanceofOperator(O, BC)的結果；

如果O的類型不是對象，返回false；

讓P等于Get(C, "prototype")，大概語義是獲取C.prototype的值；

如果P的數據類型不是對象，拋出一個類型錯誤的異常；

重復執行下述步驟：

讓O等于O.[[GetPrototypeOf]]()的結果，大概語義就是獲取O的原型對象；

如果O等于null，返回false；

如果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。

由上面的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)的步驟如下：

讓F等于this值；

返回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操作符，希望大家能有所收獲。如果本文有什么錯誤或者不嚴謹的地方，歡迎在評論區留言。