【重溫基礎】instanceof運算子
阿新 • • 發佈:2018-12-02
最近開始在整理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,同上
複製程式碼
注意:
a instanceof F
返回true
以後,不一定永遠都都返回為true
,F.prototype
屬性的值有可能會改變。- 原表示式
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'){
//變數存在
}
複製程式碼