JavaScript instance code to explain the instanceof operator

Source: Internet
Author: User
Tags object classe constructor return true true hasownproperty

Article Introduction: 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.

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:

JS Code

 
 
  1. function ClassA ()
  2. {
  3. this.ma = ' ClassA ';
  4. }
  5. CLASSA.PROTOTYPE.FA = function () {return ' prototype function ';};
  6. function ClassB ()
  7. {
  8. THIS.MB = ' CLASSB ';
  9. }
  10. Classb.prototype = Classa.prototype;
  11. var obja = new ClassA ();
  12. Alert ((' ma ' in Obja) + ' + obja.hasownproperty (' ma ')); Output True True
  13. Alert (' MB ' in Obja) + ' + obja.hasownproperty (' MB '); Output false false
  14. Alert (' FA ' in obja) + ' + obja.hasownproperty (' FA ')); Output true False
  15. Alert (' FB ' in obja) + ' + obja.hasownproperty (' fb '); Output true False
  16. Alert (Obja instanceof ClassA); Output true
  17. Alert (Obja instanceof CLASSB); Output true
  18. var objb = new ClassB ();
  19. Alert ((' ma ' in objb) + ' + objb.hasownproperty (' ma ')); Output false false
  20. Alert (' MB ' in OBJB) + ' + objb.hasownproperty (' MB '); Output True True
  21. Alert (' FA ' in objb) + ' + objb.hasownproperty (' FA ')); Output true False
  22. Alert (' FB ' in OBJB) + ' + objb.hasownproperty (' fb '); Output true False
  23. Alert (OBJB instanceof ClassA); Output true
  24. 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

 
 
  1. function ClassA ()
  2. {
  3. this.ma = ' ClassA ';
  4. }
  5. CLASSA.PROTOTYPE.FA = function () {return ' prototype function FA ';};
  6. function ClassB ()
  7. {
  8. THIS.MB = ' CLASSB ';
  9. }
  10. Classb.prototype = Classa.prototype;
  11. CLASSB.PROTOTYPE.FB = function () {return ' prototype function FB ';
  12. function CLASSC ()
  13. {
  14. THIS.MC = ' CLASSC ';
  15. }
  16. Classc.prototype = new ClassB ();
  17. CLASSC.PROTOTYPE.FC = function () {return ' prototype function FC ';};
  18. var OBJC = new CLASSC ();
  19. Alert (OBJC instanceof CLASSB); Output true
  20. Alert (OBJC instanceof ClassA); Output true
  21. Alert ((' ma ' in OBJC) + ' + objc.hasownproperty (' ma ')); Output false false
  22. Alert (' MB ' in OBJC) + ' + objc.hasownproperty (' MB '); Output true False
  23. Alert (' MC ' in OBJC) + ' + objc.hasownproperty (' MC '); Output True True
  24. Alert (' FA ' in OBJC) + ' + objc.hasownproperty (' FA ')); Output true False
  25. Alert (' FB ' in OBJC) + ' + objc.hasownproperty (' fb '); Output true False
  26. 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

 
 
  1. function ClassA ()
  2. {
  3. this.ma = ' ClassA ';
  4. }
  5. CLASSA.PROTOTYPE.FA = function () {return ' prototype function FA ';};
  6. function ClassB ()
  7. {
  8. THIS.MB = ' CLASSB ';
  9. }
  10. Classb.prototype = Classa.prototype;
  11. CLASSB.PROTOTYPE.FB = function () {return ' prototype function FB ';
  12. function CLASSC ()
  13. {
  14. THIS.MC = ' CLASSC ';
  15. }
  16. Classc.prototype = new ClassB ();
  17. CLASSC.PROTOTYPE.FC = function () {return ' prototype function FC ';};
  18. function CLASSD ()
  19. {
  20. this.md = ' CLASSD ';
  21. }
  22. Classd.prototype = Classc.prototype;
  23. CLASSC.PROTOTYPE.FD = function () {return ' prototype function fd ';};
  24. function Classe ()
  25. {
  26. this.me = ' classe ';
  27. }
  28. Classe.prototype = new CLASSD ();
  29. ClassE.prototype.fe = function () {return ' prototype function Fe ';};
  30. var obje = new Classe ();
  31. Alert (obje instanceof ClassA); Output true
  32. Alert (obje instanceof CLASSB); Output true
  33. Alert (obje instanceof CLASSC); Output true
  34. Alert (obje instanceof CLASSD); Output true
  35. Alert (obje instanceof classe); Output true
  36. Alert ((' ma ' in obje) + ' + obje.hasownproperty (' ma ')); Output false false
  37. Alert (' MB ' in obje) + ' + obje.hasownproperty (' MB '); Output true False
  38. Alert (' MC ' in Obje) + ' + obje.hasownproperty (' MC '); Output false false
  39. Alert (' MD ' in Obje) + ' + obje.hasownproperty (' MD '); Output true False
  40. Alert ((' Me ' in obje) + ' + obje.hasownproperty (' Me ')); Output True True
  41. Alert (' FA ' in obje) + ' + obje.hasownproperty (' FA ')); Output true False
  42. Alert (' FB ' in obje) + ' + obje.hasownproperty (' fb '); Output true False
  43. Alert ((' FC ' in Obje) + ' + obje.hasownproperty (' FC ')); Output true False
  44. Alert (' fd ' in obje) + ' + obje.hasownproperty (' fd '); Output true False
  45. 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.

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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.