【重溫基礎】instanceof運算子

pingan8787發表於2018-12-01

最近開始在整理ES6/ES7/ES8/ES9的知識點（已經上傳到 我的部落格 上），碰到一些知識點是自己已經忘記（用得少的知識點），於是也重新複習了一遍。
這篇文章要複習的 instanceof 是我在整理過程中遇到的，那就整理下來吧，不然容易忘記。
要是哪裡寫得不妥，歡迎各位大佬指點。

1.定義

instanceof運算子用於測試建構函式的prototype屬性是否出現在物件的原型鏈中的任何位置。 —— MDN

簡單理解為：instanceof可以檢測一個例項是否屬於某種型別。
比如：

function F (){
    // ...
}
let a = new F ();

a instanceof F;      // true
a instanceof Object; // true  後面介紹原因
複製程式碼

還可以在繼承關係中用來判斷一個例項是否屬於它的父型別。
比如：

function F (){};
function G (){};
function Q (){};
G.prototype = new F();   // 繼承
 
let a = new G(); 
a instanceof F;      // true
a instanceof G;      // true
a instanceof Q;      // false
複製程式碼

2.使用方法

語法為: object instanceof constructor。

  • object : 需要測試的函式
  • constructor : 建構函式

即：用instanceof運算子來檢測constructor.prototype 是否存在引數object的原型鏈。

function F (){};
function G (){};
let a = new F ();

a instanceof F;      // true  因為：Object.getPrototypeOf(a) === F.prototype
a instanceof Q;      // false 因為：F.prototype不在a的原型鏈上
a instanceof Object; // true  因為：Object.prototype.isPrototypeOf(a)返回true
F.prototype instanceof Object;  // true,同上
複製程式碼

注意：

  1. a instanceof F 返回 true 以後，不一定永遠都都返回為true，F.prototype屬性的值有可能會改變。
  2. 原表示式a的值也會改變，比如 a.__proto__ = {}之後，a instanceof F就會返回false了。

檢測物件是不是特定建構函式的例項：

// 正確
if (!(obj instanceof F)) {
  // ...
}

// 錯誤 因為
if (!obj instanceof F);  // 永遠返回false  
// 因為 !obj 在instanceof之前被處理 ， 即一直使用一個布林值檢測是否是F的例項
複製程式碼

3.實現instanceof

/**
* 實現instanceof
* @param obj{Object} 需要測試的物件
* @param fun{Function} 建構函式
*/
function _instanceof(obj, fun) {
    let f = fun.prototype;   // 取B的顯示原型
    obj = obj.__proto__;       // 取A的隱式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (obj === null)
            return false;
        if (f === obj)        // 這裡重點：當 f 嚴格等於 obj 時，返回 true
            return true;
        obj = obj.__proto__;
    }
}
複製程式碼

4.instanceof 與 typeof 對比

相同：
instanceof和typeof都能用來判斷一個變數的型別。

區別：
instanceof 只能用來判斷物件、函式和陣列，不能用來判斷字串和數字等：

let a = {};
let b = function () {};
let c = [];
let d = 'hi';
let e = 123;

a instanceof Object;  // true
b instanceof Object;  // true
c instanceof Array;   // true
d instanceof String;  // false
e instanceof Number;  // false
複製程式碼

typeof ：用於判斷一個表示式的原始值，返回一個字串。

typeof 42;         // "number"
typeof 'blubber';  // "string"
typeof true;       // "boolean"
typeof aa;         // "undefined"
複製程式碼

一般返回結果有：

  • number
  • boolean
  • string
  • function（函式）
  • object（NULL,陣列，物件）
  • undefined。

判斷變數是否存在：
不能使用：

if(a){
    //變數存在
}
// Uncaught ReferenceError: a is not defined
複製程式碼

原因是如果變數未定義，就會報未定義的錯，而應該使用：

if(typeof a != 'undefined'){
    //變數存在
}
複製程式碼

5.參考資料

  1. MDN instanceof

  2. IBM instanceof

  3. js中typeof和instanceof用法區別

相關文章