JavaScript instanceof

我們說不要以貌取人，在人際交往中這一點非常重要。

但是在程式設計中，建議"以貌取人"，從長相可以大致猜測功能。

instanceof由單詞instance與of構成，instance是例項的意思，of表示從屬關係。

它可以判斷物件是否是指定建構函式（類）的例項，如果是則返回true，否則返回false。

事實上，只要建構函式的prototype原型物件在物件的原型鏈上，就會返回true。

也就是說此運算子可以判斷是否指定類或者父類的例項。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
object instanceof class

引數解析：

（1）.object：物件例項，判斷它是否是某個類或者父類的例項。

（2）.class：一個類，或者說建構函式。

只要class的原型物件處於object物件原型鏈上的任何位置，運算子返回true。

關於原型鏈相關知識可以參閱JavaScript 原型鏈一章節。

程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,age){
  this.name=webName;
  this.age=age;
}
let ant=new Antzone('螞蟻部落',5);
console.log(ant.__proto__ === Antzone.prototype);
console.log(ant instanceof Antzone);

程式碼執行效果截圖如下：

ant.__proto__ === Antzone.prototype返回true，可見Antzone原型物件位於物件ant原型鏈之上。

所以運算子返回true，這個很容易理解，更多內容參閱如下兩篇文章：

（1）.prototype屬性可以參閱JavaScript prototype 原型一章節。

（2）.__proto__屬性可以參閱__proto__屬性一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,age){
  this.name=webName;
  this.age=age;
}
let ant=new Antzone('螞蟻部落',5);
console.log(ant.__proto__ === Antzone.prototype);
console.log(Antzone.prototype.__proto__ === Object.prototype);
console.log(ant instanceof Object);

程式碼執行效果截圖如下：

物件例項ant並非由Object建構函式直接建立。

但是運算子依然返回true，因為Object.prototype在ant的原型鏈之上。

這說明建構函式Antzone與Object之間存在繼承關係。

不過需要注意如下兩點：

（1）.如果建構函式的prototype物件被人為改變，那麼返回值有可能是false。

（2）.同樣道理，如果物件例項的__proto__被改變，那麼返回值同樣有可能是false。

還有一點需要特別注意，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let one="antzone";
let two=new String("antzone");
console.log(one instanceof String);
console.log(two instanceof String)

程式碼執行效果截圖如下：

通常來講，通過建構函式建立的物件應用instanceof運算子才會返回true。

但是陣列直接量和物件直接量是例外，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let one=[];
let two={};
console.log(one instanceof Array);
console.log(two instanceof Object)

程式碼執行效果截圖如下：

二.instanceof深入分享：

上面是運算子最為基本的使用規則，一切都是按照理論按部就班，非常容易理解。

但是也有很多讓人匪夷所思的現象，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,age){ 
  this.name=webName; 
  this.age=age; 
}
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(Antzone instanceof Function);//true

程式碼執行效果截圖如下：

instanceof與繼承密切相關，下面分享一個著名的關於物件間繼承關係的圖片。

下面僅以Object instanceof Object返回true為例子做一下分析。

程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
ObjectL = Object;
ObjectR = Object; 

console.log(ObjectL.__proto__ === Function.prototype) //true
console.log(Function.prototype.__proto__ === ObjectR.prototype) // true

程式碼執行效果截圖如下：

結合繼承關係圖，可以一步一步的推匯出ObjectR.prototype在ObjectL的原型鏈上。

那麼Object instanceof Object返回true就是理所當然的事情了。