为什么Object.assign之后我的计算属性无效？

Question

我偶然发现了与现代JavaScript类似的代码：

let obj = {
  data: {number: 9},
  set prop(p) {
    this.data = p;
  },
  get prop() {
    return this.data;
  }
};

obj = Object.assign({}, obj, {
  data: {number: 2}
});

console.log('obj.data === obj.prop ', obj.data === obj.prop);
console.log('obj.data.number === obj.prop.number ', obj.data.number === obj.prop.number);

任何修改都在计算属性之外进行，就好像没有修改一样。

我期望计算属性仍然存在。

有没有办法在调用后保留计算的属性Object.assign？谢谢。

Answer 1

如果查看由创建的新对象的结果，object.assign您将看到它不再具有getter / setter，而是具有property prop。object.assign不会复制getter / setter函数，而是调用[[get]]并创建一个新属性。

MDN描述了它：

它在源上使用[[Get]]，在目标上使用[[Set]]，因此它将调用getter和setter。因此，它分配属性而不是仅仅复制或定义新属性。如果合并源包含getter，则可能不适合将新属性合并到原型中。

因此，assign()将具有prop属性的对象与具有属性的对象合并在一起data，您将同时获得：

let obj = {
  data: {
    number: 9
  },

  set prop(p) {
    this.data = p;
  },

  get prop() {
    return this.data;
  }

};

obj = Object.assign({}, obj, {
  data: {
    number: 2
  }
});

// it has a data and a prop property -- they are not the same:
console.log(obj)