Javascript:两个不同的对象共享一个数组属性？

Question

这个问题已经有答案了:

Crockford's Prototypal inheritance - Issues with nested objects (3 个回答)

Javascript object members that are prototyped as arrays become shared by all class instances (3 个回答)

已关闭 5 年前。

在我的 JavaScript 项目中，我定义一个对象，然后使用 Object.create() 创建多个实例。该对象具有多个(字符串和整数)属性，每个属性对于每个实例都是唯一的。但是，如果我使用数组属性，则所有实例共享相同的数组。

这段代码很容易证明这一点:

TestThing = {
    code: "?",
    intlist: [],

    addint(i) {
        alert("Adding " + i + " to " + this.code + ", list had " + this.intlist.length + " ints");
        this.intlist.push(i);
    }
}

var thing1 = Object.create(TestThing);
thing1.code = "Thing 1";
var thing2 = Object.create(TestThing);
thing2.code = "Thing 2";

thing1.addint(11);
thing2.addint(42);

alert(thing2.intlist);  // will output 11,42

那么，是什么原因造成的呢？我该如何解决这个问题？

Answer 1

使用引用类型属性，每个子级都会获得对同一对象的引用。任何子级对对象所做的任何更改对于所有实例都是可见的。

您需要实现一个构造函数来设置该属性，或者让使用该属性的代码在第一次进行设置。 (但是，如果您想使用构造函数和 Object.create，则必须自己调用它；Object.create 不会”我不会帮你打电话。)

你可以做这样的事情......

TestThing = {
    code: "?",
    intlist: null,
    addint : (i) => {
        if (!this.intlist) this.intlist = [];
        alert("Adding " + i + " to " + this.code + ", list had " + this.intlist.length + " ints");
        this.intlist.push(i);
    }
}

或者，不太容易出错(尽管放弃了 Object.create)...

class TestThing {
    constructor(code) {
        this.code = code;
        this.intlist = [];
    }

    addint(i) {
        alert("Adding " + i + " to " + this.code + ", list had " + this.intlist.length + " ints");
        this.intlist.push(i);
    }
}

var thing1 = new TestThing("Thing 1");
var thing2 = new TestThing("Thing 2");

thing1.addint(11);
thing2.addint(42);

alert(thing2.intlist);  // will output 42

不幸的是，如果您正在为网络浏览器编码，IE(甚至 IE 11)似乎不支持 class。因此，您必须坚持使用定义类的旧方法。

TestThing = function(code) {
    this.code = code;
    this.intlist = [];
};

TestThing.prototype = {
    addint: function(i) {
        alert("Adding " + i + " to " + this.code + ", list had " + this.intlist.length + " ints");
        this.intlist.push(i);
    }
};