instanceof 操作符簡介

對于檢測基本數(shù)據(jù)類型，我們會想到用typeof操作符檢測；對于引用類型，我們會想到用instanceof操作符來檢測。通常我們使用它來檢測某個值是否是某個類型的實例。

let person = new Person('eason')
person instanceof Person // true

instanceof 語言規(guī)范及定義

在 Standard ECMA-262 6th Edition 中 instanceof 的定義

12.9.3 Runtime Semantics: Evaluation

RelationalExpression : RelationalExpression instanceof ShiftExpression

// 執(zhí)行左邊的表達(dá)式得到值lval
Let lref be the result of evaluating RelationalExpression.
Let lval be GetValue(lref).
ReturnIfAbrupt(lval).
// 執(zhí)行右邊的表達(dá)式得到值rval
Let rref be the result of evaluating ShiftExpression.
Let rval be GetValue(rref).
ReturnIfAbrupt(rval).
// 執(zhí)行InstanceofOperator
Return InstanceofOperator(lval, rval).

我們接著看InstanceofOperator的定義

12.9.4 Runtime Semantics: InstanceofOperator(O, C)

If Type(C) is not Object, throw a TypeError exception.
// 獲取第二個參數(shù)的hasInstance方法，賦值給instOfHandler
Let instOfHandler be GetMethod(C,@@hasInstance).
ReturnIfAbrupt(instOfHandler).
// instOfHandler若不是undefined則執(zhí)行并返回布爾值
If instOfHandler is not undefined, then
Return ToBoolean(Call(instOfHandler, C, ?O?)).
If IsCallable(C) is false, throw a TypeError exception.
// 否則執(zhí)行OrdinaryHasInstance
Return OrdinaryHasInstance(C, O).

最后兩個步驟是為了兼容沒有內(nèi)置@@hasInstance方法的ECMAScript版本，其實@@hasInstance中也是執(zhí)行OrdinaryHasInstance方法。

19.2.3.6 Function.prototype[@@hasInstance] ( V )

Let F be the this value.
// 執(zhí)行OrdinaryHasInstance
Return OrdinaryHasInstance(F, V).

我們直接看核心方法OrdinaryHasInstance

7.3.19 OrdinaryHasInstance (C, O)

If IsCallable(C) is false, return false.
If C has a [[BoundTargetFunction]] internal slot, then
Let BC be the value of C’s [[BoundTargetFunction]] internal slot.
Return InstanceofOperator(O,BC) (see 12.9.4).
If Type(O) is not Object, return false.
// P指向C的原型
Let P be Get(C, "prototype").
ReturnIfAbrupt(P).
If Type(P) is not Object, throw a TypeError exception.
// 進(jìn)入循環(huán)
Repeat
// O指向O的原型
Let O be O.[[GetPrototypeOf]]().
ReturnIfAbrupt(O).
// 若O為空，返回false
If O is null, return false.
// 若O和P的值相等，返回true
If SameValue(P, O) is true, return true.

官方的定義比較隱晦，我們可以自己很容易地實現(xiàn)一個instanceof函數(shù)

let instanceof = (O, C) => {
    let P = C.prototype
    while (true) {
        O = O.__proto__
        if (O === P) return true
        if (O === null) return false
    }
}

其實簡單點說就是：對一個實例（左值）從它的原型鏈中向上進(jìn)行查找，O.__proto__.__proto__.__proto__...直到找到那個構(gòu)造函數(shù)（右值）的原型C.prototype為止，假如找到的話則返回true，假如找到頂部O.prototype.__proto__還找不到的話返回false。

假如對上面的instanceof函數(shù)有疑問的話，別急，我們先回顧一下我們的老朋友——JavaScript原型繼承機(jī)制。

JavaScript原型繼承機(jī)制

每個對象都有一個私有屬性（稱之為 [[Prototype]]），它持有一個連接到另一個稱為其 prototype 對象（原型對象）的鏈接。該 prototype 對象又具有一個自己的原型，層層向上直到一個對象的原型為 null。

遵循ECMAScript標(biāo)準(zhǔn)，someObject.[[Prototype]] 符號是用于指向 someObject的原型。從 ECMAScript 6 開始，[[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問器來訪問。這個等同于 JavaScript 的非標(biāo)準(zhǔn)但許多瀏覽器實現(xiàn)的屬性 __proto__。

我們再看一張經(jīng)典原型鏈的圖片

可以看出：

// 創(chuàng)建一個對象實例
o1 = new Object()
// 創(chuàng)建一個函數(shù)實例，一般來說不推薦這種方法，這里只是為了方便理解
f1 = new Foo() 

// o1是由Object創(chuàng)建出來的，它的__proto__指向創(chuàng)建它的函數(shù)的原型
o1.__proto__ === Object.prototype
// f1是由Foo創(chuàng)建出來的，它的__proto__指向創(chuàng)建它的函數(shù)的原型
f1.__proto__ === Foo.prototype

// Foo是個構(gòu)造函數(shù)，也是繼承于函數(shù)的構(gòu)造函數(shù)Function
Foo.__proto__ === Function.prototype
// Function也是個構(gòu)造函數(shù)，也是繼承于他自己
Function.__proto__ === Function.prototype
// 對象也是個構(gòu)造函數(shù)，也是繼承于函數(shù)的構(gòu)造函數(shù)Function
Object.__proto__ === Function.prototype

// Function.prototype也是一個普通對象，它的__proto__指向?qū)ο笤?Function.prototype.__proto__ === Object.prototype
// Foo也是同樣的道理
Foo.prototype.__proto__ === Object.prototype

// 對象原型是原型鏈的頂端，它的__proto__指向null，而null沒有__proto__
Object.prototype.__proto__ === null

舉個幾個栗子

Object instance of Object

R = ObjectR.prototype = Object.prototype
// 第一次判斷
L = ObjectL.__proto__ = Function.prototype
// 不等于，進(jìn)入下一個循環(huán)
L != R
// 第二次判斷
L = L.__proto__ = Function.prototype.__proto__ = Object.prototype
// 等于，返回true
L == R

Function instance of Function

R = FunctionR.prototype = Function.prototype
// 第一次判斷
L = FunctionL.__proto__ = Function.prototype
// 等于，返回true
L == R

Foo instance of Foo

R = FooR.prototype = Foo.prototype
// 第一次判斷
L = FooL.__proto__ = Function.prototype
// 不等于，進(jìn)入下一個循環(huán)
L != R
// 第二次判斷
L = L.__proto__ = Function.prototype.__proto__ = Object.prototype
// 不等于，進(jìn)入下一個循環(huán)
L != R
// 第三次判斷
L = L.__proto__ = Object.prototype.__proto__ = null
// 還是不等于，已經(jīng)到達(dá)原型鏈頂端，返回false
L != R

舉幾個特殊的栗子

string instance of String

R = String.prototype = Object.prototype
// 第一次判斷
L = string.__proto__ = String.prototype
// 不等于，進(jìn)入下一個循環(huán)
L != R
// 第二次判斷
L = L.__proto__ = String.prototype.__proto__ = Object.prototype
// 等于，返回true
L == R

看起來沒什么問題，但是實際上

let string = 'test'
string.__proto__ === String.prototype // true
string instance of String // false

這是為什么呢？因為string畢竟還是個字符串，不是對象類型，string有自己的方法是因為ECMAScript提供了3個特殊的引用類型: Boolean、Number 和 String，叫做基本包裝類型，而自動創(chuàng)建的基本包裝類型的對象只存在于一行代碼的執(zhí)行瞬間然后就立即被銷毀。官方并不建議我們顯式調(diào)用基本包裝類型創(chuàng)建對象，這會讓人對基本類型和引用類型產(chǎn)生混淆。

看下一個特殊的栗子

null instanceof null // Uncaught TypeError: Right-hand side of 'instanceof' is not an object

undefined instanceof undefined // Uncaught TypeError: Right-hand side of 'instanceof' is not an object

null沒有proto方法，嚴(yán)格來說它沒有任何屬性和方法；undefined不是引用類型，也沒有任何屬性和方法，在instanceof的語言規(guī)范中假如該類型不是引用類型的話則報錯。

結(jié)語