前端每日一問--談談instance的原理

candice的前端發表於2018-11-08
前端

instanceof

平時在工作和學習中，我們使用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，其他的也就不難理解了。

相關文章