Angular 4中实例变量随局部变量变更：原因及解决方法

嘿，你遇到的这个情况，本质上是JavaScript引用类型的特性在搞鬼，我给你掰扯清楚：

一、为什么修改localCampaign会影响campaignData？ #

在JavaScript里，对象（包括你代码里的campaignData）属于引用类型。当你执行let localCampaign = this.campaignData;这行代码时，你并没有复制campaignData这个对象的所有内容，而是把campaignData在内存中的引用地址赋值给了localCampaign。

换句话说，localCampaign和this.campaignData现在指向的是同一块内存空间里的同一个对象。所以你修改localCampaign.isPublish的时候，其实就是直接修改了那块内存里的对象属性，自然this.campaignData.isPublish也会跟着变——因为它们根本就是同一个东西啊！

你贴的代码里，publishCampaign()方法里的赋值操作就是典型的引用传递，不是值传递。

二、怎么阻止campaignData被修改？ #

要解决这个问题，核心就是创建一个原对象的副本，让localCampaign指向这个新的副本，而不是原对象的引用。根据你的对象结构，有几种常用方法：

1. 使用对象展开运算符（推荐，简洁直观） #

ES6+的展开运算符可以快速创建一个浅拷贝的对象：

publishCampaign() {
  // 创建原对象的浅拷贝
  let localCampaign = { ...this.campaignData };
  localCampaign.isPublish = true;
  // 现在修改localCampaign不会影响this.campaignData了
}

2. 使用Object.assign() #

这也是创建浅拷贝的经典方法：

publishCampaign() {
  let localCampaign = Object.assign({}, this.campaignData);
  localCampaign.isPublish = true;
}

3. 深拷贝（如果对象有嵌套结构） #

如果campaignData里面还有嵌套的对象或数组，上面的浅拷贝方法只能拷贝第一层，嵌套的部分还是引用。这时候需要用深拷贝：

// 方法1：JSON序列化（注意会丢失函数、undefined等特殊类型）
publishCampaign() {
  let localCampaign = JSON.parse(JSON.stringify(this.campaignData));
  localCampaign.isPublish = true;
}

// 方法2：使用第三方库（比如Lodash的_.cloneDeep）
// 先安装lodash：npm install lodash
// 然后导入使用：
import { cloneDeep } from 'lodash';

publishCampaign() {
  let localCampaign = cloneDeep(this.campaignData);
  localCampaign.isPublish = true;
}

注意：如果你的campaignData没有嵌套对象，用前两种浅拷贝方法就足够了，深拷贝没必要，还会增加性能开销。

内容的提问来源于stack exchange，提问作者Mayank yaduvanshi