AngularJS深拷贝详解，如何实现对象的深拷贝？

AngularJS 作为一款经典的前端框架，其数据绑定和依赖注入机制深受开发者喜爱，在实际开发中，深拷贝是一个常见且重要的需求，尤其是在处理复杂数据结构（如对象、数组）时，避免引用类型数据共享导致的意外修改，本文将详细解析 AngularJS 中的深拷贝实现方式、适用场景及最佳实践。

深拷贝与浅拷贝的区别

在理解深拷贝之前,需先明确其与浅拷贝的本质区别，浅拷贝（Shallow Copy）仅复制对象的第一层属性，若属性值为引用类型（如数组、对象），则复制的是其引用地址，修改拷贝后的对象会影响原对象，而深拷贝（Deep Copy）则会递归复制所有层级的属性，确保拷贝后的对象与原对象完全独立，互不影响。

var original = { name: "AngularJS", info: { version: "1.x" } };
var shallowCopy = angular.copy(original); // AngularJS 提供的浅拷贝/深拷贝方法
shallowCopy.info.version = "2.x";
console.log(original.info.version); // 输出 "2.x"（浅拷贝影响原对象）

上述代码中,angular.copy 默认执行深拷贝，因此修改 shallowCopy 不会影响 original。

AngularJS 中的深拷贝方法

AngularJS 内置了 angular.copy() 方法，用于实现对象的深拷贝或浅拷贝，其语法为：

angular.copy(source, [destination]);

• source：要拷贝的对象或数组。
• destination：可选参数，若指定，则结果将复制到该对象中，否则返回新对象。

基本用法

var obj = { a: 1, b: [2, 3] };
var copiedObj = angular.copy(obj);
copiedObj.b.push(4);
console.log(obj.b); // 输出 [2, 3]（原对象未受影响）

浅拷贝模式

若仅需浅拷贝,可通过自定义方法实现，或利用 Object.assign()（ES6）或扩展运算符（），但 AngularJS 本身未提供直接浅拷贝方法，需开发者自行处理：

var shallowCopy = function(obj) {
  return Object.assign({}, obj);
};

深拷贝的注意事项

尽管 angular.copy() 功能强大，但在使用时仍需注意以下场景：

循环引用对象

若对象中存在循环引用（即对象的某个属性指向自身），angular.copy() 会抛出错误。

var obj = { name: "Test" };
obj.self = obj; // 循环引用
angular.copy(obj); // 抛出错误

解决方案：可结合 angular.toJson() 和 angular.fromJson() 处理，但需注意方法会丢失函数类型属性：

var copiedObj = angular.fromJson(angular.toJson(obj));

函数与特殊对象

angular.copy() 无法拷贝函数、正则表达式、Date 对象等特殊类型的引用，仅会复制其引用地址。

var obj = { fn: function() { return "Hello"; } };
var copiedObj = angular.copy(obj);
copiedObj.fn === obj.fn; // true（函数为同一引用）

性能考量

深拷贝需要递归遍历对象的所有属性,对于大型或嵌套层级较深的数据结构，可能影响性能，建议仅在必要时使用深拷贝，避免频繁操作。

深拷贝的适用场景

1. 数据隔离：在表单处理中，拷贝原始数据作为表单模型，提交后对比修改，避免直接污染原数据。
2. 状态管理：在实现撤销/重做功能时，需深拷贝历史状态，确保状态间互不影响。
3. 数据传递：向子作用域传递复杂数据时，通过深拷贝避免父作用域与子作用域的数据冲突。

自定义深拷贝方法

若需处理循环引用或特殊对象,可扩展自定义深拷贝方法，以下为支持循环引用的深拷贝实现：

function deepCopy(source, hash = new WeakMap()) {
  if (source === null || typeof source !== "object") {
    return source;
  }
  if (hash.has(source)) {
    return hash.get(source); // 处理循环引用
  }
  let copy = Array.isArray(source) ? [] : {};
  hash.set(source, copy); // 缓存已拷贝对象
  for (let key in source) {
    if (source.hasOwnProperty(key)) {
      copy[key] = deepCopy(source[key], hash);
    }
  }
  return copy;
}

深拷贝与其他 AngularJS 功能的结合

与数据绑定结合

在双向数据绑定中,若需临时修改数据而不影响视图，可先深拷贝数据副本，操作后再通过 $scope.$apply() 更新视图。

与依赖注入结合

在服务（Service）中，若需缓存深拷贝后的数据，可通过工厂模式实现：

app.factory('dataService', function() {
  var cachedData = null;
  return {
    getData: function(originalData) {
      if (!cachedData) {
        cachedData = angular.copy(originalData);
      }
      return cachedData;
    }
  };
});

深拷贝是 AngularJS 开发中保障数据安全的重要手段。angular.copy() 方法提供了便捷的深拷贝实现，但在处理循环引用、特殊对象及性能优化时需谨慎，开发者应根据实际场景选择合适的拷贝策略，必要时可通过自定义方法扩展功能，合理使用深拷贝，能有效避免因数据共享引发的问题，提升应用的稳定性和可维护性。

深拷贝方法对比表

通过本文的解析,希望开发者能更深入地理解 AngularJS 中的深拷贝机制，并在实际项目中灵活应用，构建更健壮的前端应用。