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

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，其餘的也就不難理解了。