1. 程式人生 > >【重溫基礎】instanceof運算子

【重溫基礎】instanceof運算子

最近開始在整理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 以後,不一定永遠都都返回為trueF.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 對比

相同
instanceoftypeof都能用來判斷一個變數的型別。

區別
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用法區別