Javascript：仍然对 instanceof 运算符感到困惑

Question

article 定义 instanceof 如下：

instanceof 操作符测试一个对象是否在其原型中 链接构造函数的原型属性。

这是一个公平的解释，生活很美好，直到我从 Eloquent Javascript 一书中看到这段代码：

function TextCell(text) {
  this.text = text.split("\n");
}

TextCell.prototype.minWidth = function() {
  return this.text.reduce(function(width, line) {
    return Math.max(width, line.length);
  }, 0);
}

TextCell.prototype.minHeight = function() {
  return this.text.length;
}

TextCell.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(line + repeat(" ", width - line.length));
  }
  return result;
}

function RTextCell(text) {
  TextCell.call(this, text);
}

RTextCell.prototype = Object.create(TextCell.prototype);

RTextCell.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(repeat(" ", width - line.length) + line);
  }
  return result;
};

让我们创建一个 RTextCell 的实例并执行下面的 c

var rt = new RTextCell("ABC");
console.log(rt instanceof RTextCell); // true
console.log(rt instanceof TextCell); // true

我理解为什么第二个 console.log 的输出是“真”——因为构造函数 TextCell 是原型链的一部分。

但是第一个 console.log 让我感到困惑。

如果看代码（倒数第 10 行），RTextCell 的原型被更新为一个新的 Object，其原型设置为 TextCell.prototype。

RTextCell.prototype = Object.create(TextCell.prototype);.

看下面的快照，对象“rt”的原型链中没有提到构造函数“RTextCell”。那么，按照我在文章开头提到的定义，输出不应该是假的吗？为什么会返回真值？

我也阅读了this，但没有帮助我理解这个具体问题。

rt、RTextCell、TextCell 的快照按顺序见下文。

Answer 1

obj instanceof RTextCell

正在测试 RTextCell.prototype 是否存在于 obj 的原型链中。这是因为 obj 是使用新的 RTextCell 制作的。 RTextCell.prototype 的原型是 TextCell.prototype 的事实在这里是无关紧要的，似乎让你失望了。

RTextCell.prototype = Object.create(TextCell.prototype);

没有去掉RTextCell.prototype，它仍然是一个对象，但它的原型恰好是TextCell.prototype。

Answer 2

准确的措辞很重要。您说 构造函数 在原型链中，但原始引用没有：

instanceof 操作符测试一个对象是否在其原型中 链接构造函数的原型属性。

所以表达式 rt instanceof RTextCell 实际上是在测试类似的东西（请记住 __proto__ 不是标准的）：

var p = rt.__proto__;
while(p)
{
  if(p == RTextCell.prototype)
    return true;
  p = p.__proto__;
}
return false;

因此，即使函数 RTextCell 没有在上面的对象树中直接引用，RTextCell.prototype 对象也是。

Answer 3

您确实更改了RTextCell.prototype，但您在构造任何RTextCell 实例之前更改了它。考虑这个完全不同的示例，其中 RTextCell.prototype 在使用原始原型创建实例后被修改：

var rt = new RTextCell();
RTextCell.prototype = somethingTotallyDifferent;
rt instanceof RTextCell; // false!

rt 创建时，rt.__proto__ === RTextCell.prototype 是真的。一旦RTextCell.prototype 发生变化，这就不再是真的了。

您不是在测试 rt 在其原型链中是否具有来自RTextCell 的原始 prototype 属性。相反，您正在测试 RTextCell.prototype right now 的值是否存在于对象的原型链中。对于RTextCell 实例，这始终是正确的，因为RTextCell 构造函数创建的实例总是在其原型链中获得RTextCell.prototype 的当前值，并且在开始构造实例后您永远不会更改RTextCell.prototype。