javascript - 原型(prototype)上的属性受到不同的影响

Question

我在这段代码中使用了原型(prototype)继承:

function SuperType() {
  this.colors = ["red", "blue", "green"];
  this.x = 1;
}

function SubType() {}
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
instance1.x = 2;
//alert(instance1.colors); // "red,blue,green,black"
//alert(instance1.x); // 2

var instance2 = new SubType();
alert(instance2.colors); // "red,blue,green,black"
alert(instance2.x); // 1

我希望输出是

"red,blue,green"
1

或

"red,blue,green,black"
2

但我得到:

"red,blue,green,black"
1

为什么？

Answer 1

问题出在这里:

SubType.prototype = new SuperType();

因为 SuperType 构造函数将 .colors 数组放在对象上，并且因为该对象被用作 的 .prototype >SubType，.colors 数组在所有 SubType 实例之间共享。

相反，在设置继承时不要调用构造函数，而是确实在 SubType 构造函数中调用它。

function SubType() {
    SuperType.apply(this, arguments);
}
SubType.prototype = Object.create(SuperType.prototype);

---

.x 没有同样问题的原因是数字是不可变的，因此当您尝试修改它时，会直接创建一个新的 x在您正在使用的对象上，而不是改变 .prototype。