javascript - 数组属性在JS对象中是如何工作的

Question

对于下面的代码，为什么更新了myObj的propB？为什么 test.childObj 没有自己的属性 propB？

var myObj = { propA: '', propB: [] }
var fatherObj = {
    childObj: null,
    init: function() {
        this.childObj = Object.create(myObj);
        this.childObj.propA = 'A';
        this.childObj.propB.push(2);
    }
}

var test = Object.create(fatherObj);
test.init();

console.log(myObj.propB.length);
console.log(test.childObj.hasOwnProperty('propA'));
console.log(test.childObj.hasOwnProperty('propB'));

Answer 1

使用 Object.create 您不复制对象，而是创建一个继承传递对象的新对象:

  this.childObj { } ->  myObj { propA: "", propB: [] }

现在，当您获得一个属性时，它会在继承链中查找。由于无法在子对象中找到它，因此会在 myObj 中查找它。这通常不是问题，因为设置对象属性直接将其设置在对象本身上而不使用继承链，因此:

  this.childObj.propA += "test";

在 myObj 上查找 propA 但在 childObj 上设置 propA。但是，对于引用类型，您不会重写该属性，因此:

  this.childObj.propB.push(1);

在myObj中查找propB，并向其推送，结果为:

 this.childObj { propA: "test" } ->  myObj { propA: "", propB: [1] }

要解决这个问题，childObj 必须有自己的 propB 数组:

 this.childObj.propB = this.childObj.propB.slice();

结果是:

 this.childObj { propA: "test", propB: [1] } ->  myObj { propA: "", propB: [1] }

现在推送到 propB 会推送到 childObj 中的数组。