instanceof如何在JavaScript中运行?

前端之家收集整理的这篇文章主要介绍了instanceof如何在JavaScript中运行?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在下面的代码示例中,最后使用instanceof检查obj2和obj3,即使构造的方式不同并且返回name属性的结果不同,也会返回true.
  1. var Obj1 = function() {
  2. this.name = "foo1";
  3. };
  4. Obj1.prototype.name = "foo1onProt";
  5. var obj1 = new Obj1();
  6.  
  7. var Obj2 = function() {};
  8. Obj2.prototype = new Obj1();
  9. Obj2.prototype.constructor = Obj2;
  10. var obj2 = new Obj2();
  11.  
  12. var Obj3 = function() {};
  13. Obj3.prototype = Object.create(Obj1.prototype);
  14. Obj3.prototype.constructor = Obj3;
  15. var obj3 = new Obj3();
  16.  
  17. console.dir(obj1);
  18. console.log("obj1.name: " + obj1.name);
  19.  
  20. console.dir(obj2);
  21. console.log("obj2.name: " + obj2.name);
  22.  
  23. console.dir(obj3);
  24. console.log("obj3.name: " + obj3.name);
  25.  
  26. console.log("obj2 instanceof Obj1: " + (obj2 instanceof Obj1));
  27. console.log("obj3 instanceof Obj1: " + (obj3 instanceof Obj1));

在Chrome中运行的结果:

  1. Obj1
  2. name: "foo1"
  3. __proto__: Object
  4. constructor: function () {
  5. name: "foo1onProt"
  6. __proto__: Object
  7. obj1.name: foo1
  8. Obj2
  9. __proto__: Obj1
  10. constructor: function () {}
  11. name: "foo1"
  12. __proto__: Object
  13. constructor: function () {
  14. name: "foo1onProt"
  15. __proto__: Object
  16. obj2.name: foo1
  17. Obj3
  18. __proto__: Object
  19. constructor: function () {}
  20. __proto__: Object
  21. constructor: function () {
  22. name: "foo1onProt"
  23. __proto__: Object
  24. obj3.name: foo1onProt
  25.  
  26. obj2 instanceof Obj1: true
  27. obj3 instanceof Obj1: true

认识到obj2和obj3不同的最佳方法是什么?
实际上如何工作?

解决方法

What is the best way to recognize that obj2 and obj3 are different?

这在很大程度上取决于你在做什么.一种方法是使用instanceof Obj2和instanceof Obj3.由于两个对象都是在原型链中使用Obj1.prototype创建的,因此它们确定为我们在基于类的OOP中称为超类型的实例.

How does actually instanceof work?

简短的版本

obj instanceof F查看F.prototype引用的对象是否在obj的原型链中的任何位置.它根本不使用构造函数.

更多细节

§11.8.5 – The instanceof Operator中的规范涵盖了这一点,它说(间接地,通过§8.6.2)它调用函数对象的[[HasInstance]]内部方法,传入我们正在测试的对象.函数[[HasInstance]](在§15.3.5.3中)表示它从函数的prototype属性获取对象引用,如果该对象在目标对象的原型链中的任何位置,则返回true,否则返回false.

它不使用构造函数(事实上,JavaScript本身没有) – 如果你考虑它,它就不能,因为一个对象的构造函数属性只能指向一个函数,但一个对象可以是多个函数的实例 – 例如,在伪经典继承的情况下:

  1. function F1() {}
  2.  
  3. function F2() {
  4. F1.call(this);
  5. }
  6. F2.prototype = Object.create(F1.prototype);
  7. F2.prototype.constructor = F2;
  8.  
  9. var obj = new F2();
  10. snippet.log(obj instanceof F1); // true
  11. snippet.log(obj instanceof F2); // true
  1. <!-- Script provides the `snippet` object,see http://Meta.stackexchange.com/a/242144/134069 -->
  2. <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

两者都是正确的,因为F1.prototype和F2.prototype引用的两个对象都在obj的原型链中.

instanceof为true并不一定意味着obj是通过直接或间接调用F创建的;它只是表明它们之间存在模糊的联系(F.prototype指的是同样在obj的原型链中的对象).它通常意味着F参与创建对象,但不能保证.

例如:

  1. function F() {}
  2. var obj = Object.create(F.prototype);
  3. snippet.log(obj instanceof F); // true
  1. <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

请注意,根本没有调用F来创建对象.

或者可能更清楚和/或更显着:

  1. function F() {}
  2. var p = {};
  3. var obj = Object.create(p);
  4. snippet.log(obj instanceof F); // false
  5. F.prototype = p;
  6. snippet.log(obj instanceof F); // true
  1. <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

还有这个不寻常但完全可能的版本:

  1. function F1() {}
  2. function F2() {}
  3. F1.prototype = F2.prototype = {};
  4. var obj = new F1();
  5. snippet.log(obj instanceof F2); // true
  1. <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

或者这一个:

  1. function F1() {}
  2. function F2() {}
  3. var obj = new F2();
  4. snippet.log(obj instanceof F1); // false
  5. F1.prototype = F2.prototype;
  6. snippet.log(obj instanceof F1); // true
  1. <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

猜你在找的JavaScript相关文章