新的JavaScript原型更改了構造函數

Question

當你創建一個對象與構造它有一個constructor屬性指向構造函數：

var Foo = function(foo) {
    this.foo = foo;
}
var myFoo = new Foo(123);
myFoo.constructor === Foo; // true

創建此對象后，我可以更改Foo.prototype ...

Foo.prototype.x = 'y';

...或重新分配一個新的原型對象：

Foo.prototype = {
    num: 99
};
myFoo.constructor === Foo; // still true

但是，如果在將新對象分配給Foo.prototype 之后創建新的Foo對象，則其構造函數會突然指向Object ：

var myBar = new Foo(321);
myBar.constructor === Foo; // false
myBar.constructor === Object; // wtf?!

向原型添加新屬性不會產生這種效果，您必須進行賦值Foo.prototype = {...} 。

我不知道為什么創建一個新的原型會影響構造函數的屬性。 我在Chrome，Firefox和Internet Explorer中進行了測試，所有結果均相同。 有人可以幫我理解嗎？

Answer 1

任何對象的constructor屬性均從該對象的原型繼承。

使用任何函數創建的默認prototype對象都包含一個constructor屬性，該屬性引用該函數，如spec中所述。

您的新prototype對象不具有該constructor屬性，而是具有自Object.prototype繼承的其自己的constructor屬性。

Answer 2

把它們加起來：

• myFoo.constructor實際上是myFoo.__proto__.constructor 。
• 創建新原型不會影響現有對象。 在上面的示例中， myFoo.x的值為"y"但是myFoo.num是undefined 。
• 當然，新創建的對象使用該新原型，該原型沒有屬性constructor 。 因此他們繼承了它。 在上面的示例中， myBar.constructor實際上是指向Object myBar.__proto__.__proto__.constructor 。

如果從對象文字分配新原型，則只需設置構造函數屬性即可：

var Foo = function(foo) {
    this.foo = foo;
};
var myFoo = new Foo(123);

Foo.prototype = {
    num: 99,
    constructor: Foo
};
var myBar = new Foo(99);

myBar.constructor === myFoo.constructor; // true

或者，更准確地說：

Foo.prototype = {
    num: 99
};
Object.defineProperty(Foo.prototype, "constructor", {
    writable: true,
    configurable: true,
    enumerable: false,
    value: Foo
});