Angular 2如何阻止特定变量的数据绑定？解决对象引用同步变更问题

嘿，这个问题我太熟悉了！你遇到的情况本质是JavaScript对象的引用传递特性——当你把data赋值给d和oldD时，这两个变量并没有拿到独立的对象副本，而是都指向了内存中同一个对象。所以你修改d的属性时，其实是直接修改了那个共享的对象，oldD自然也会跟着变。

下面给你几种实用的解决方案，还有全局复用的方法：

一、浅拷贝（适合无嵌套的单层对象） #

如果你的data是没有嵌套对象的简单结构，用这两种方法就足够了：

• 对象展开运算符（ES6+）：

  function(data) {
    d = {...data}; // 复制出独立的单层对象
    oldD = {...data}; // 同样复制一份，和d互不影响
  }
  

• Object.assign()方法：

  function(data) {
    d = Object.assign({}, data);
    oldD = Object.assign({}, data);
  }
  

这两种方法都会创建一个新对象，把原对象的所有可枚举属性复制进去，这样d和oldD就指向不同的对象了。

二、深拷贝（适合有嵌套对象的复杂结构） #

如果你的data里嵌套了其他对象或数组，浅拷贝就不够用了——嵌套的对象依然是引用传递。这时候需要用深拷贝：

1. JSON序列化法（简单但有局限性） #

这是最快捷的深拷贝方式，但要注意它无法处理函数、Symbol、undefined、循环引用这些特殊值：

function(data) {
  d = JSON.parse(JSON.stringify(data));
  oldD = JSON.parse(JSON.stringify(data));
}

2. 手写递归深拷贝函数（更可靠） #

如果需要处理特殊类型，或者追求更稳定的效果，可以写一个全局可用的深拷贝函数：

// 全局定义的深拷贝工具函数
function deepClone(obj) {
  // 处理非对象类型（基本类型、null）
  if (obj === null || typeof obj !== 'object') return obj;
  
  // 处理日期对象
  if (obj instanceof Date) return new Date(obj.getTime());
  
  // 处理数组
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  
  // 处理普通对象
  const clonedObj = {};
  for (const key in obj) {
    // 只复制自身属性，不包括原型链上的
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}

// 使用示例
function(data) {
  d = deepClone(data);
  oldD = deepClone(data);
}

这个函数可以递归复制所有嵌套的对象和数组，还处理了日期类型，能应对大部分场景，而且可以在全局任意地方复用。

三、全局方案的小建议 #

如果想在项目里统一解决这个问题，可以把上面的deepClone函数挂载到全局对象（比如浏览器环境的window），或者封装成工具模块，需要的时候导入使用，这样就不用每次都重复写拷贝逻辑了。

内容的提问来源于stack exchange，提问作者Berend Hulshof