JavaScript 中的 instanceof 是如何工作的？

Question

在下面的代码示例中，以 instanceof 结尾的 obj2 和 obj3 的检查都返回 true，即使它们的构造方式不同并且返回的结果 name属性不同。

var Obj1 = function() {
    this.name = "foo1";
};
Obj1.prototype.name = "foo1onProt";
var obj1 = new Obj1();

var Obj2 = function() {};
Obj2.prototype = new Obj1();
Obj2.prototype.constructor = Obj2;
var obj2 = new Obj2();

var Obj3 = function() {};
Obj3.prototype = Object.create(Obj1.prototype);
Obj3.prototype.constructor = Obj3;
var obj3 = new Obj3();

console.dir(obj1);
console.log("obj1.name: " + obj1.name);

console.dir(obj2);
console.log("obj2.name: " + obj2.name);

console.dir(obj3);
console.log("obj3.name: " + obj3.name);

console.log("obj2 instanceof Obj1: " + (obj2 instanceof Obj1));
console.log("obj3 instanceof Obj1: " + (obj3 instanceof Obj1));

在 Chrome 中运行的结果：

Obj1
  name: "foo1"
  __proto__: Object
    constructor: function () {
    name: "foo1onProt"
    __proto__: Object
obj1.name: foo1
Obj2
  __proto__: Obj1
    constructor: function () {}
    name: "foo1"
    __proto__: Object
      constructor: function () {
      name: "foo1onProt"
      __proto__: Object
obj2.name: foo1
Obj3
   __proto__: Object
   constructor: function () {}
   __proto__: Object
     constructor: function () {
     name: "foo1onProt"
     __proto__: Object
obj3.name: foo1onProt

obj2 instanceof Obj1: true
obj3 instanceof Obj1: true

识别 obj2 和 obj3 不同的最佳方法是什么？ instanceof 实际上是如何工作的？

Answer 1

识别 obj2 和 obj3 不同的最佳方法是什么？

这在很大程度上取决于您对它们的处理方式。一种方法是使用instanceof Obj2 和instanceof Obj3。由于这两个对象都是在其原型链中使用Obj1.prototype 创建的，因此将它们标识为我们在基于类的 OOP 中称为超类型的实例是有道理的。

instanceof 实际上是如何工作的？

短版

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

更多详情

§11.8.5 - The instanceof Operator 在规范中对此进行了介绍，它表示（间接地，通过§8.6.2）它调用函数对象的[[HasInstance]] 内部方法，并传入我们正在测试的对象。 Function 的 [[HasInstance]] （在 §15.3.5.3 中）表示它从函数的 prototype 属性中获取对象引用，然后如果该对象在目标对象的原型链中的任何位置，则返回 true，false 如果它没有。

它不使用constructor（实际上，JavaScript 本身没有使用）——如果你仔细想想，它不能，因为一个对象的constructor 属性只能指向一个函数，但是一个对象可以是instanceof 多个函数——例如，在伪经典继承的情况下：

function F1() {}

function F2() {
  F1.call(this);
}
F2.prototype = Object.create(F1.prototype);
F2.prototype.constructor = F2;

var obj = new F2();
console.log(obj instanceof F1); // true
console.log(obj instanceof F2); // true

两者都是真的，因为F1.prototype 和F2.prototype 引用的两个对象都在obj 的原型链中。

instanceof 为真并不一定意味着obj 是通过直接或间接调用F 创建的；它只是表明它们之间存在模糊的联系（F.prototype 指的是也在obj 的原型链中的对象）。它通常意味着F参与了创建对象，但不能保证。

例如：

function F() {}
var obj = Object.create(F.prototype);
console.log(obj instanceof F); // true

请注意，根本没有调用 F 来创建对象。

---

或者也许更清楚和/或戏剧性地：

function F() {}
var p = {};
var obj = Object.create(p);
console.log(obj instanceof F); // false
F.prototype = p;
console.log(obj instanceof F); // true

---

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

function F1() {}
function F2() {}
F1.prototype = F2.prototype = {};
var obj = new F1();
console.log(obj instanceof F2); // true

---

或者这个：

function F1() {}
function F2() {}
var obj = new F2();
console.log(obj instanceof F1); // false
F1.prototype = F2.prototype;
console.log(obj instanceof F1); // true

Answer 2

最简单的：当obj 在其构造函数/原型链中具有constructor 的原型时，obj instanceof constructor 产生true。换句话说，您询问引擎是否可以将obj 视为constructor 的实例/obj 的行为是否类似于constructor 对象。

有少量语法允许您将constructor 的原型放在obj 的原型链中。它们中的任何一个都将导致obj instanceof constructor 成为true。在您的示例中，obj2 和 obj3 在其原型链中都有 Obj1。

因此，当您询问您的 JavaScript 引擎是否任一 obj2 或 obj3 的行为类似于 Obj1 的实例时，JavaScript 假定 true - 这是他们不会的唯一情况' t 是你是否已经覆盖了Obj1 的行为。