javascript - 如何在 javascript 中显示委托(delegate) `constructor` 引用问题？

Question

在下面的示例中，我注意到注释“修复了委托(delegate)的构造函数引用”，我很好奇 - 如何显示“不工作/然后在我添加那行 javascript 之后工作？”

完整要点在这里 => https://gist.github.com/getify/5572383

提前致谢

function Foo(who) {
    this.me = who;
}

Foo.prototype.identify = function() {
    return "I am " + this.me;
};

function Bar(who) {
    Foo.call(this,"Bar:" + who);
}

Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.constructor = Bar;    // "fixes" the delegated `constructor` reference

Answer 1

javascript 中的函数实际上是对象。当我们在 Javascript 中创建任何函数 Foo 时，解释器会自动创建一个 prototype 属性 Foo.prototype，它本身就是一个对象。然后解释器在这个对象上创建一个 constructor 属性，它引用 Foo 本身:

console.log(Foo.prototype.constructor);                   // reference to Foo;
console.log(Foo.prototype.hasOwnProperty("constructor")); // TRUE;

当我们创建 Bar 函数时，也会发生同样的过程。但是稍后我们介绍一个区别。不同之处在于，我们使用以下代码手动覆盖 Bar.prototype 中的对象:

Bar.prototype = Object.create(Foo.prototype);

现在 Bar.prototype 有一个我们手动创建的新对象。这个新对象没有 constructor 属性，因为它是由我们而不是解释器创建的:

console.log(Bar.prototype.hasOwnProperty("constructor")); // FALSE

所以 Bar.prototype 没有自己的 constructor 属性，但是 Foo.prototype 有。接下来，假设我们创建了一个 Bar 的实例:

var myBar = new Bar();

myBar.constructor 是 myBar 对象上不存在的继承属性。如果我们尝试访问它，javascript 解释器会在原型(prototype)链中向上搜索 constructor 属性。它在 Bar.prototype 上找不到，因为我们覆盖了那个对象。解释器继续搜索并最终找到 Foo.prototype 上的属性。因此，对 myBar.constructor 的任何引用都将引用 Foo.prototype.constructor，其中包含对 Foo 的引用:

console.log(myBar.constructor); // reference to Foo

所以这就是我们显式手动设置Bar.prototype.constructor的原因，这样当遍历原型(prototype)链时，解释器会在上找到一个constructor属性Bar.prototype 如果我们没有覆盖它，它会是这样的:

Bar.prototype.constructor = Bar;

最终结果是对我们的对象更有用的行为:

var myBar2 = new Bar();
console.log(myBar2.constructor); // reference to Bar

这个问题不应该经常出现，因为很少有人需要检查对象的 constructor 属性。