Javascript实例代码讲解instanceof操作符

2012-04-15 02:38:58  来源:网页教学网 

网页制作Webjx文章简介:在JavaScript中,我们可以用instanceof操作符来判断对象是否是某个类的实例,如果obj instaceof Class返回true,那么我们认为obj是Class的实例,obj要么由Class创建,要么由Class的子类创建。

在JavaScript中,我们可以用instanceof操作符来判断对象是否是某个类的实例,如果obj instaceof Class返回true,那么我们认为obj是Class的实例,obj要么由Class创建,要么由Class的子类创建。来自Java或其他强类型语言的开发者一定认为如果obj instaceof Class返回true,那么obj肯定拥有Class的所有属性。事实是这样么?我们看下面的代码:

Js代码

  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

 

在这段代码中,我们定义了两个类,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代码

  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采用原型链方法继承了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代码

  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的原型与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。

综合前面的论述与验证,我们可以得出结论,如果obj instanceof Class返回true,那么Class的原型与obj原型链上的某个原型是同一个对象,但这并不意味着obj拥有Class的所有实例属性(但肯定拥有Class的所有原型属性)。

更多