JavaScript 继承对象作为属性

Question

我当前拥有的是一个对象(比如 b)，它继承了另一个对象(比如 a)。在对象 a 中，我有一个对象作为属性(值)。澄清事情:

var a = (function(){});

a.prototype.value = {
    val : "value a"
};

var b = (function(){
    this.value.val = "b";
    alert("object b: " + this.value.val);
});

b.prototype = Object.create(a.prototype);
b.prototype.constructor = a;

new b();  // alerts "object b: b"

http://jsfiddle.net/qqmtb846/

到目前为止，一切都很好。在对象 b 中，我将“value”对象的“val”属性设置为另一个值。正如预期的那样，值已设置(值现在为“b”)。

当我创建另一个对象时，比如说 c，我希望得到原始值('value a')。

事实并非如此。我确定这是由于对象引用。

var a = (function(){});

a.prototype.value = {
    val : "value a"
};

var b = (function(){
    this.value.val = "b";
    alert("object b: " + this.value.val);
});

var c = (function(){
    alert("object c: " + this.value.val);
});

b.prototype = Object.create(a.prototype);
b.prototype.constructor = a;

c.prototype = Object.create(a.prototype);
c.prototype.constructor = a;

var ObjectB = new b(); // alerts "object b: b"
var ObjectC = new c(); // alerts "object c: b", I want that "object b: value a" is displayed

http://jsfiddle.net/eb6dsgv9/1/

我想在父类(super class)中使用对象作为属性，因为大多数值都是相同的，但有时它们必须更改。尽管它是一个新实例，但仍然有一个引用。

1) 这是 JavaScript 的某种设计弱点吗？2)我该如何解决这个问题？

Answer 1

这是预期的行为。在构造函数中，this.value 引用与 a.prototype.value 相同的对象。您可以使用新值覆盖this.value(这将使a.prototype及其属性保持不变)，但是如果您修改this.value.val 您正在修改 a.prototype.value 的 val 属性。

我不知道你所说的“设计弱点”是什么意思，所以我无法回答(1)。这就是 JavaScript 原型(prototype)继承的工作方式。

至于如何解决这个问题，我认为你需要向我们展示一个更具体的例子，因为我认为没有一个简单的一刀切的解决方案。它可以通过使用深层复制而不是 Object.create 来解决(尽管根据您进行深层复制的方式，您可能会丢失原型(prototype)上的任何方法(如果有的话))。简单来说，如果你需要修改原型(prototype)的属性，你就会遇到这样的情况。

可能更好的解决方案是为每个实例提供一组单独的数据值。让所有实例共享同一组数据值会让您的情况变得一团糟。

初始化a构造函数中的属性:

var a = function () {
    this.value = {
        val: "value a"
    };
};

然后您可以从 b 和 c 的构造函数调用该构造函数:

var b = function () {
    b.prototype.constructor.call(this);
    this.value.val = "b";
    console.log("object b: " + this.value.val);
};

var c = function () {
    c.prototype.constructor.call(this);
    console.log("object c: " + this.value.val);
};

http://jsfiddle.net/eb6dsgv9/6/