沐鳴註冊平台_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

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9822