前端每日一問--談談instance的原理
平時在工作和學習中,我們使用instanceof的頻率不是很高,相比之下使用typeof的頻率可能還要高不少
typeof:typeof 運算子返回一個用來表示表示式的資料型別的字串。通常typeof返回的如下結果:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。null和物件typeof都會返回"object"。所以在判斷某個資料型別是否是物件typeof就會有點吃力。
與typeof 方法不同的是,instanceof 方法要求開發者明確地確認物件為某特定型別。例如:
var strObj = new String('hello world') console.log(strObj instanceof String) // true 複製程式碼
這段程式碼就是判斷變數strObj是否為String物件的例項。通常使用instanceof 就是判斷一個例項是否屬於某種型別,
// 判斷 foo 是否是 Foo 類的例項 function Foo(){} var foo = new Foo(); console.log(foo instanceof Foo)//true 複製程式碼
另外,更重的一點是 instanceof 可以在繼承關係中用來判斷一個例項是否屬於它的父型別。例如:
// 判斷 foo 是否是 Foo 類的例項 , 並且是否是其父型別的例項 function Aoo(){} function Foo(){} Foo.prototype = new Aoo();//JavaScript 原型繼承 var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true 複製程式碼
咋一看instanceof其實還挺簡單的,那來看看下面幾個例子:
console.log(Object instanceof Object);//true console.log(Function instanceof Function);//true console.log(Number instanceof Number);//false console.log(String instanceof String);//false console.log(Function instanceof Object);//true console.log(Foo instanceof Function);//true console.log(Foo instanceof Foo);//false 複製程式碼
看了上面的程式碼是不是又暈頭轉向了?為什麼 Object 和 Function instanceof 自己等於 true,而其他類 instanceof 自己卻又不等於 true 呢?如何解釋?要想從原理上了解 instanceof 的奧祕。
剖析instanceof原理,其內部機制是通過判斷物件的原型鏈中是不是能找到型別的 prototype。直接看instanceof的程式碼實現:
function instance_of(L, R) {//L 表示左表示式,R 表示右表示式 var O = R.prototype;// 取 R 的顯示原型 L = L.__proto__;// 取 L 的隱式原型 while (true) { if (L === null) return false; if (O === L)// 這裡重點:當 O 嚴格等於 L 時,返回 true return true; L = L.__proto__; } } 複製程式碼
推演Object instanceof Object
// 為了方便表述,首先區分左側表示式和右側表示式 ObjectL = Object, ObjectR = Object; // 下面根據規範逐步推演 O = ObjectR.prototype = Object.prototype L = ObjectL.__proto__ = Function.prototype // 第一次判斷 O != L // 迴圈查詢 L 是否還有 __proto__ L = Function.prototype.__proto__ = Object.prototype // 第二次判斷 O == L // 返回 true 複製程式碼
知道Object instanceof Object為true,其他的也就不難理解了。