JavaScript operator instanceof Secrets

In JavaScript, we can use the instanceof operator to determine whether an object is an instance of a class, and if Obj instaceof class returns True, then we think that obj is an instance of class, and obj is created by class, is either created by subclasses of class. Developers from Java or other strongly typed languages must assume that if Obj instaceof class returns True, then obj must have all the attributes of class. Is that true? Let's look at the following code: (Spot Goose Original: http://bantouyan.iteye.com)

JS Code

 
 

  
  

  
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
 
 

In this code, we defined two classes, ClassA and CLASSB, and ClassA created a prototype method FA, created a prototype method FB for CLASSB, and created the object Obja and OBJB respectively. Intuitively, we do not think that ClassA and CLASSB are the same class, so obja is not an instance of CLASSB, OBJB is not an instance of ClassA, and Obja does not own attributes FB,OBJB nor owns the property FA, but the results tell us that JavaScript doesn't think so. Obja and OBJB both have attributes FA and FB, which are both instances of ClassA and CLASSB. Let's analyze the reasons below. (Spot Goose Original: http://bantouyan.iteye.com)

ClassA's prototype and CLASSB prototype are the same objects, so adding a prototype method to the ClassA will affect CLASSB, and the CLASSB will also be affected by the addition of the prototype method FB. So Obja and OBJB both have attributes of FA and FB, which is also easier to understand. OBA has no classb instance attribute mb but is an instance of CLASSB, OBJB does not have a ClassA instance property Ma but is an instance of ClassA, which indicates that instanceof's judgment is independent of the instance property. Since instanceof has nothing to do with instance properties, it is related to the prototype property. In fact, JavaScript determines the results of instanceof operations based on the prototype. (Spot Goose Original: http://bantouyan.iteye.com)

We know that the object created by the same constructor shares the same prototype as the constructor (it is not generally possible to directly access the object's prototype), and ClassA and CLASSB share the same prototype, so Obja and OBJB share the same prototype, so it can be argued that If an object shares a prototype with a class, then the object is an instance of the class, and the instanceof operation returns True. Now let's look at the inheritance. (Spot Goose Original: http://bantouyan.iteye.com)

JS Code

 
 

  
  

  
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 uses the prototype chain method to inherit the CLASSB, so the Classc object OBJC is an example of CLASSB, but the result tells us that OBJC is also an example of ClassA. OBJC is an instance of CLASSC, so OBJC shares a prototype with CLASSC. The prototype of the CLASSC is an instance of CLASSB, so the prototype of the CLASSC prototype is the same prototype as the CLASSB prototype, and CLASSB shares the same prototype as the ClassA, so the prototype of the CLASSC prototype is the same archetype as the ClassA prototype, That is, the prototype of the OBJC prototype is the same archetype as the ClassA prototype. From this perspective, instanceof can determine the result of an operation based on the prototype of the object prototype, that is, the prototype chain, that is, if the prototype of the class is the same object as a prototype on the object prototype chain, then the instanceof operation returns TRUE or FALSE. Here's a longer code to validate this conclusion. (Spot Goose Original: http://bantouyan.iteye.com)

JS Code

 
 

  
  

  
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's prototype shares the same object as the CLASSB prototype, and the CLASSC prototype shares an object with the CLASSD prototype, while CLASSC is a subclass of ClassB, a subclass of Classe, and CLASSD is an instance of Obje. So the first prototype of the Obje's prototype is the Classe prototype, which is the CLASSD instance, so the second prototype is the CLASSD prototype, the CLASSC prototype, and the CLASSC prototype is the CLASSB instance, so the third prototype on the prototype chain is the CLASSB prototype. , which is the prototype of ClassA. Therefore, the prototypes of ClassA, CLASSB, CLASSC, CLASSD, and Classe are all on the prototype chain of the object Obje, so Obje is an instance of these classes. This also validates the previous conclusion that if the prototype of the class is the same object as a prototype on the object prototype chain, then the instanceof operation returns True. Although Obje is an instance of ClassA, CLASSC, it does not have an instance attribute of ClassA instance property MA,CLASSC. (Spot Goose Original: http://bantouyan.iteye.com)

In combination with previous discussion and validation, we can conclude that if Obj instanceof class returns True, then class's prototype is the same object as a prototype on the OBJ prototype chain, but that does not mean that obj owns all instance attributes of Class ( But it certainly has all the stereotype properties of class.

"Edit Recommendation"

1. 10 Excellent HTML 5 sketch and drawing design tools
2. Learn HTML 50 Best site recommendations
3. 12 ingenious and interesting HTML 5 apps
4. 10 amazing HTML5 and JavaScript effects
5. Technology Daniel on the design principle of HTML 5

"Responsible editor: Jin He TEL: (010) 68476606"