javascript - 使用 Object.assign 更新对象后，在数组上调用 Push 方法会崩溃

Question

我们从网络接收 JSON，并将数据转换为 TypeScript 中类的对象，以便 getter 和 setter 工作，如下例所示

class Sent {
  id: number

  constructor(model? : Sent){
    if(model){
      Object.assign(this, model);
    }
  }
}

class Email{
  name: string;
  age: number;
  sent: Sent[];

  constructor(model?: Email){
    if(model){
      Object.assign(this, model);
      for(let x of model.sent){
        this.sent.push(new Sent(x))
       }
    }
  }
}

当我们使用 JSON 数据创建一个新对象(如下例所示)时，浏览器会在 this.sent.push(new Sent(x)) 行崩溃。

如果我们用 concat 替换 push ，它就可以正常工作。

如果我们在循环之前将 this.sent 设置为新的空数组，例如 this.sent = []，那么它也可以工作

只是想了解为什么 push 方法在这里崩溃。感谢任何帮助

Stackblitz重现问题。

Answer 1

通过使用Object.assign(this, model);，您只需将两个对象绑定(bind)在一起(只要 JavaScript 对象通过引用传递)。请参阅此代码以获取说明:

obj1 = {}
obj2 = {list: []}
Object.assign(obj1, obj2);
obj2.list.push(1);
console.log(obj1.list);

因此，将元素添加到第二个对象的属性后，它会出现在第一个对象中。

让我们回到你的问题。您已绑定(bind) this 和 model 对象。迭代 model.send 属性，您将元素推送到 this.sent，这实际上与您将元素推送到 model.send 相同>。因此你会得到一个无限循环。