JavaScript对象引用与赋值问题：两段任务更新代码为何一段生效一段失效？

你猜得完全没错——问题的核心就是JavaScript的对象引用与变量赋值机制，咱们把两段代码拆开来看就清楚了：

先看有效的代码块 #

this.updateTask(task).subscribe(a => { 
  let updatedTask = initializeTask(a); 
  task.auditLog = updatedTask.auditLog; 
});

这里的关键逻辑是：你没有改变task变量本身指向的对象，而是直接修改了这个对象的auditLog属性。

原来的task变量（比如你组件里用来绑定UI、存储任务数据的那个变量），一直指向内存中同一个对象。当你执行task.auditLog = updatedTask.auditLog时，你是在修改这个共享对象的属性，所以所有引用这个对象的地方（比如页面上展示AuditLog的部分）都会立刻看到更新——这就是为什么这段代码能正常生效。

再看无效的代码块 #

this.updateTask(task).subscribe(a => { 
  task = initializeTask(a); 
});

这里你犯了一个典型的JavaScript赋值误区：你是在重新给箭头函数作用域内的task变量赋值，让它指向initializeTask(a)返回的对象，但外部的task变量根本没被改变！

结合你提供的initializeTask实现来看：这个函数是直接修改传入的对象t的属性，然后返回同一个t。但即使它返回的是处理后的对象，当你在箭头函数里执行task = ...时，你只是改变了这个局部task变量的引用，而组件里原来的task变量依然指向旧的对象。页面UI或者其他依赖原对象的逻辑，自然看不到AuditLog的更新。

一句话总结差异 #

• 有效代码：修改原对象的属性，保持变量引用不变，所有依赖该对象的地方同步更新。
• 无效代码：重新赋值变量，改变了局部变量的引用，但外部原引用未变，依赖原对象的地方无感知。

内容的提问来源于stack exchange，提问作者Slava Kuznetsov