javascript - 对象属性用省略号代替点 : Object = { . ..Object }

Question

在一个 Angular 4 项目中，有这样一行代码 this.config = { ...this.config } 。经过一番检查，似乎没有改变this.config 。但是删除该行会破坏 this.config 的更改检测.

这是正在使用该对象的组件

<dp-date-picker config="config"> </dp-date-picker>

这是唯一修改 this.object 的函数

  private updateConfig(value, key) {
   if (!this.config) {
      this.config = {};
   }
   this.config[key] = value;
   this.config = { ...this.config }; // why does this work?
  }

谁能解释一下this.config = { ...this.config }是吗？

Answer 1

当你创建一个对象时，你就创建了一个内存引用。将一个对象传播到另一个对象中会创建该对象的副本，但位于不同的内存引用中。

让我们想象一下:

const obj = { id: 1, sub: { id: 11 } };
const copy = { ...obj };

console.log(obj === copy); // false
console.log(obj.sub === copy.sub); // true
console.log(obj.id === copy.id); // true

正如您所看到的，两个对象没有相同的内存引用，但子对象有，并且原始值作为值而不是引用进行比较。

这意味着在编写时

this.config = { ...this.config };

您实际上创建了一个新的内存引用，并删除了前一个内存引用。

在 Angular 中，创建新的内存引用会触发更改检测。如果删除该代码段，则不会再发生任何事情，因为您接触的是对象(子对象)的内存引用，而不是对象本身。

要触发更改检测，您可以使用传播或 ChangeDetectorRef.prototype.detectChanges 函数。

希望它能回答您的问题!