首頁  >  文章  >  web前端  >  詳解ECMAScript7規範中instanceof操作子(附實例)

詳解ECMAScript7規範中instanceof操作子(附實例)

不言
不言原創
2018-09-17 14:01:431629瀏覽

這篇文章帶給大家的內容是關於詳解ECMAScript7規範中instanceof操作符(附實例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

本文主要說明ECMAScript7規範中的instanceof操作子。

預備知識

有名的Symbols

「有名」的Symbols指的是內建的符號,它們定義在Symbol物件上。 ECMAScript7中使用了@@name的形式引用這些內建的符號,像是下面會提到的@@hasInstance,其實就是Symbol.hasInstance。

InstanceofOperator(O, C)

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)

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。

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)的步驟如下:

讓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操作符的行为。

总结

本文主要讲解ECMAScript7规范中的instanceof操作符,希望大家能有所收获。

以上是詳解ECMAScript7規範中instanceof操作子(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多