为什么我的计算属性在 Object.assign 之后无效？ [复制]答案

【问题标题】：Why is my computed property not effective after Object.assign? [duplicate]为什么我的计算属性在 Object.assign 之后无效？ [复制]
【发布时间】：2019-08-13 20:50:24
【问题描述】：

我在现代 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 后保留计算的属性？谢谢。

【问题讨论】：

对象分配的重点是您正在创建一个新对象，而不是对原始对象的引用。在此示例中，您的预期输出是什么？
我希望将属性（实际的获取和设置）分配给新对象，在新对象上调用属性并通过新的 obj.data 获取/设置。我的意思是，从概念上讲，它们都是相同的对象类型？
它们是相同的对象“类型”，但您使用的是 ===，这里没有两个对象会被计算为相等，即使它们的内容相同，除非一个对象引用了原始对象跨度>
来自您的代码：obj.data = {number: 2}, obj.prop = {number: 9}，因此 obj.data != obj.prop
@Iracicot 即使他们俩的数字都是 9，他们仍然会评估为 false

标签： javascript computed-properties

【解决方案1】：

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

MDN describes it:

它在源上使用 [[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)

【讨论】：

非常感谢。不过那我还是得想办法保住财产，唉……
Related answer 使用Object.getOwnPropertyDescriptor() 来证明这一点。
@GuillaumeRacicot，我不确定你是如何使用它的，但你可以通过使用let newObj = Object.create(obj) 创建一个新对象然后设置data 来获得你想要的行为新对象的属性。它将继承父级的 getter/setter。
@MarkMeyer 我希望obj.oldData 始终产生obj.wrapper.oldData。我想要一个功能的增量迁移。

【解决方案2】：

考虑以下几点：

let ex = {
  o: 1
}

let ex2 = {
  o: 1
}

console.log(ex === ex2);

相同的对象不等同。

【讨论】：

我知道，但是obj.data 和obj.prop 怎么不会产生完全相同的对象？