JavaScript操作符instanceof揭秘

在JavaScript中，我們可以用instanceof操作符來判斷對象是否是某個類的執行個體，如果obj instaceof Class返回true，那麼我們認為obj是Class的執行個體，obj要麼由Class建立，要麼由Class的子類建立。來自Java或其他強型別語言的開發人員一定認為如果obj instaceof Class返回true，那麼obj肯定擁有Class的所有屬性。事實是這樣麼?我們看下面的代碼：(斑頭雁原創：http://bantouyan.iteye.com)

Js代碼

 

  
function ClassA()     
  
{     
  
    this.ma = 'ClassA';     
  
}     
  
ClassA.prototype.fa = function(){return 'prototype function';};     
  
    
  
function ClassB()     
  
{     
  
    this.mb = 'ClassB';     
  
}     
  
ClassB.prototype = ClassA.prototype;     
  
    
  
var obja = new ClassA();     
  
alert(('ma' in obja) + ' ' + obja.hasOwnProperty('ma')); //output true true     
  
alert(('mb' in obja) + ' ' + obja.hasOwnProperty('mb')); //output false false     
  
alert(('fa' in obja) + ' ' + obja.hasOwnProperty('fa')); //output true false     
  
alert(('fb' in obja) + ' ' + obja.hasOwnProperty('fb')); //output true false     
  
alert(obja instanceof ClassA);   //output true     
  
alert(obja instanceof ClassB);   //output true     
  
    
  
var objb = new ClassB();     
  
alert(('ma' in objb) + ' ' + objb.hasOwnProperty('ma')); //output false false     
  
alert(('mb' in objb) + ' ' + objb.hasOwnProperty('mb')); //output true true     
  
alert(('fa' in objb) + ' ' + objb.hasOwnProperty('fa')); //output true false     
  
alert(('fb' in objb) + ' ' + objb.hasOwnProperty('fb')); //output true false     
  
alert(objb instanceof ClassA);   //output true     
  
alert(objb instanceof ClassB);   //output true    
 

在這段代碼中，我們定義了兩個類，ClassA與ClassB，還給ClassA建立了原型方法fa，給ClassB建立了原型方法fb，並分別建立了對象obja與objb。直覺上，我們並不認為ClassA與ClassB是同一個類，所以obja不是ClassB的執行個體，objb也不是ClassA的執行個體，而且obja不會擁有屬性fb，objb也不會擁有屬性fa，但是運行結果告訴我們，JavaScript並不這樣認為。obja與objb都擁有屬性fa與fb，它們既是ClassA的執行個體也是ClassB的執行個體。下面我們分析一下原因。(斑頭雁原創：http://bantouyan.iteye.com)

ClassA的prototype與ClassB的prototype是同一個對象，所以給ClassA增加原型方法fa會影響到ClassB，給ClassB增加的原型方法fb也會影響到ClassA，所以obja與objb都擁有屬性fa與fb，這一點也比較容易理解。oba沒有ClassB的執行個體屬性mb但卻是ClassB的執行個體，objb也沒有ClassA的執行個體屬性ma但卻是ClassA的執行個體，這說明instanceof的判斷與執行個體屬性無關。既然instanceof與執行個體屬性無關，那麼它就跟原型屬性有關。事實上，JavaScript根據原型判定instanceof的運算結果。(斑頭雁原創：http://bantouyan.iteye.com)

我們知道同一個建構函式所建立的對象與這個建構函式共用同一個原型(只不一般不能直接存取過對象的原型)，而ClassA與ClassB也共用同一個原型，那麼obja與objb也共用同一個原型，所以可以這樣認為，如果對象與類共用一個原型，那麼對象就是這個類的執行個體，instanceof運算就返回true。下面我們看一下繼承的情況。(斑頭雁原創：http://bantouyan.iteye.com)

Js代碼

 

  
function ClassA()     
  
{     
  
    this.ma = 'ClassA';     
  
}     
  
ClassA.prototype.fa = function(){return 'prototype function fa';};     
  
    
  
function ClassB()     
  
{     
  
    this.mb = 'ClassB';     
  
}     
  
ClassB.prototype = ClassA.prototype;     
  
ClassB.prototype.fb = function(){return 'prototype function fb';};     
  
    
  
function ClassC()     
  
{     
  
    this.mc = 'ClassC';     
  
}     
  
ClassC.prototype = new ClassB();     
  
ClassC.prototype.fc = function(){return 'prototype function fc';};     
  
    
  
var objc = new ClassC();     
  
alert(objc instanceof ClassB);   //output true     
  
alert(objc instanceof ClassA);   //output true     
  
alert(('ma' in objc) + ' ' + objc.hasOwnProperty('ma')); //output false false     
  
alert(('mb' in objc) + ' ' + objc.hasOwnProperty('mb')); //output true false     
  
alert(('mc' in objc) + ' ' + objc.hasOwnProperty('mc')); //output true true     
  
alert(('fa' in objc) + ' ' + objc.hasOwnProperty('fa')); //output true false     
  
alert(('fb' in objc) + ' ' + objc.hasOwnProperty('fb')); //output true false     
  
alert(('fc' in objc) + ' ' + objc.hasOwnProperty('fc')); //output true false    
 

ClassC採用原型鏈方法繼承了ClassB，所以ClassC的對象objc是ClassB的執行個體，但是運行結果告訴我們，objc也是ClassA的執行個體。objc是ClassC的執行個體，所以objc與ClassC共用一個原型。ClassC的原型是ClassB的執行個體，所以ClassC的原型的原型與ClassB的原型是同一個原型，而ClassB與ClassA共用同一個原型，所以ClassC的原型的原型與ClassA的原型是同一個原型，即objc的原型的原型與ClassA的原型是同一個原型。由此看來，instanceof可以根據對象原型的原型，即原型鏈上的原型，判定運算的結果，即如果類的原型與對象原型鏈上的某一個原型是同一個對象，那麼instanceof運算將返回true，否則返回false。下面我們用一段更長的代碼來驗證這個結論。(斑頭雁原創：http://bantouyan.iteye.com)

Js代碼

 

  
function ClassA()     
  
{     
  
    this.ma = 'ClassA';     
  
}     
  
ClassA.prototype.fa = function(){return 'prototype function fa';};     
  
    
  
function ClassB()     
  
{     
  
    this.mb = 'ClassB';     
  
}     
  
ClassB.prototype = ClassA.prototype;     
  
ClassB.prototype.fb = function(){return 'prototype function fb';};     
  
    
  
function ClassC()     
  
{     
  
    this.mc = 'ClassC';     
  
}     
  
ClassC.prototype = new ClassB();     
  
ClassC.prototype.fc = function(){return 'prototype function fc';};     
  
    
  
function ClassD()     
  
{     
  
    this.md = 'ClassD';     
  
}     
  
ClassD.prototype = ClassC.prototype;     
  
ClassC.prototype.fd = function(){return 'prototype function fd';};     
  
    
  
function ClassE()     
  
{     
  
    this.me = 'ClassE';     
  
}     
  
ClassE.prototype = new ClassD();     
  
ClassE.prototype.fe = function(){return 'prototype function fe';};     
  
    
  
var obje = new ClassE();     
  
alert(obje instanceof ClassA);   //output true     
  
alert(obje instanceof ClassB);   //output true     
  
alert(obje instanceof ClassC);   //output true     
  
alert(obje instanceof ClassD);   //output true     
  
alert(obje instanceof ClassE);   //output true     
  
    
  
alert(('ma' in obje) + ' ' + obje.hasOwnProperty('ma')); //output false false     
  
alert(('mb' in obje) + ' ' + obje.hasOwnProperty('mb')); //output true false     
  
alert(('mc' in obje) + ' ' + obje.hasOwnProperty('mc')); //output false false     
  
alert(('md' in obje) + ' ' + obje.hasOwnProperty('md')); //output true false     
  
alert(('me' in obje) + ' ' + obje.hasOwnProperty('me')); //output true true     
  
    
  
alert(('fa' in obje) + ' ' + obje.hasOwnProperty('fa')); //output true false     
  
alert(('fb' in obje) + ' ' + obje.hasOwnProperty('fb')); //output true false     
  
alert(('fc' in obje) + ' ' + obje.hasOwnProperty('fc')); //output true false     
  
alert(('fd' in obje) + ' ' + obje.hasOwnProperty('fd')); //output true false     
  
alert(('fe' in obje) + ' ' + obje.hasOwnProperty('fe')); //output true false    
 

ClassA的原型與ClassB的原型共用同一個對象，ClassC的原型與ClassD的原型也共用一個對象，而ClassC是ClassB的子類，ClassE是ClassD的子類，而obje是ClassE的執行個體。所以obje的原型鏈的第一個原型是ClassE的原型，它是ClassD的執行個體，故第二個原型是ClassD的原型，也就是ClassC的原型，ClassC的原型是ClassB的執行個體，所以原型鏈上第三個原型是ClassB的原型，也就是ClassA的原型。所以，ClassA、ClassB、ClassC、ClassD與ClassE的原型都在對象obje的原型鏈上，所以obje是這些類的執行個體。這也驗證了前面的結論，即如果類的原型與對象原型鏈上的某一個原型是同一個對象，那麼instanceof運算將返回true。雖然obje是ClassA、ClassC的執行個體，但是它並沒有ClassA的執行個體屬性ma，ClassC的執行個體屬性mc。(斑頭雁原創：http://bantouyan.iteye.com)

綜合前面的論述與驗證，我們可以得出結論，如果obj instanceof Class返回true，那麼Class的原型與obj原型鏈上的某個原型是同一個對象，但這並不意味著obj擁有Class的所有執行個體屬性(但肯定擁有Class的所有原型屬性)。

【編輯精選】

1. 10個超棒的HTML 5素描及繪畫設計工具
2. 學習HTML 5十佳網站推薦
3. 12個精妙有趣的HTML 5應用
4. 10個令人驚奇的HTML5和JavaScript效果
5. 技術大牛談HTML 5設計原理

【責任編輯：金賀 TEL：（010）68476606】