Object.assign与深拷贝：探讨`Object.assign`的浅拷贝特性，并实现一个健壮的深拷贝函数。

Object.assign 与深拷贝：原理、缺陷与健壮实现

大家好，今天我们来深入探讨 Object.assign 的特性，以及它与深拷贝之间的关系。Object.assign 是 JavaScript 中一个常用的对象复制方法，但它实际上执行的是浅拷贝。理解这一点至关重要，因为在处理复杂对象时，不恰当的使用 Object.assign 可能会导致意想不到的副作用。我们将剖析 Object.assign 的浅拷贝机制，并在此基础上，实现一个健壮的深拷贝函数，以应对各种复杂场景。

Object.assign 的浅拷贝本质

Object.assign() 方法用于将一个或多个源对象的所有可枚举属性的值复制到目标对象。它返回目标对象。其语法如下：

Object.assign(target, ...sources)

• target: 目标对象，接收源对象的属性。
• sources: 一个或多个源对象，它们的属性将被复制到目标对象。

浅拷贝的含义：

浅拷贝意味着 Object.assign 仅复制对象属性的值。如果属性的值是一个基本类型（如字符串、数字、布尔值），则直接复制该值。然而，如果属性的值是一个对象（或数组，因为数组也是对象），则复制的是指向该对象的引用，而不是对象本身。

示例：

const obj1 = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const obj2 = Object.assign({}, obj1);

console.log(obj1); // { name: 'Alice', age: 30, address: { city: 'New York', country: 'USA' } }
console.log(obj2); // { name: 'Alice', age: 30, address: { city: 'New York', country: 'USA' } }

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';

console.log(obj1); // { name: 'Alice', age: 30, address: { city: 'Los Angeles', country: 'USA' } }
console.log(obj2); // { name: 'Bob', age: 30, address: { city: 'Los Angeles', country: 'USA' } }

在这个例子中，我们使用 Object.assign 将 obj1 复制到 obj2。当我们修改 obj2.name 时，obj1.name 不受影响，因为 name 是一个基本类型（字符串），直接复制了值。但是，当我们修改 obj2.address.city 时，obj1.address.city 也跟着改变了，因为 address 是一个对象，Object.assign 复制的是指向 obj1.address 的引用，而不是 address 对象本身。obj1.address 和 obj2.address 指向的是内存中的同一个对象。

表格总结 Object.assign 的浅拷贝特性：

属性类型	拷贝方式	影响原始对象
基本类型	值拷贝	不影响
对象/数组	引用拷贝	影响

Object.assign 的适用场景：

Object.assign 在以下情况下是合适的：

• 只需要复制对象的第一层属性，且这些属性都是基本类型。
• 明确知道对象中没有嵌套的对象或数组。
• 需要合并多个对象的属性，且只关心第一层属性。

Object.assign 的局限性：

Object.assign 不适用于以下情况：

• 需要完整地复制一个对象，包括其嵌套的对象和数组。
• 需要避免修改复制后的对象影响原始对象。

为什么我们需要深拷贝？

在很多情况下，我们需要创建一个对象的完全独立的副本，修改副本不应该影响原始对象。这就是深拷贝的用武之地。深拷贝会递归地复制对象的所有属性，包括嵌套的对象和数组，从而创建一个与原始对象完全分离的新对象。

深拷贝的应用场景：

• 状态管理： 在前端框架（如 React, Vue, Angular）中，经常需要修改状态对象，为了避免直接修改原始状态导致不可预测的行为，通常会使用深拷贝创建一个新的状态对象，然后修改新的状态对象。
• 数据缓存： 在缓存数据时，为了防止修改缓存数据影响原始数据，可以使用深拷贝创建一个缓存副本。
• 数据传递： 在将数据传递给第三方库或 API 时，为了防止第三方修改原始数据，可以使用深拷贝创建一个数据副本。

实现一个健壮的深拷贝函数

实现深拷贝的方法有很多种，例如使用 JSON.stringify 和 JSON.parse，或者手动递归复制。但这些方法都有一些局限性。JSON.stringify 无法处理循环引用、函数、undefined、Symbol 等特殊类型的数据。手动递归复制需要考虑各种边界情况，容易出错。

下面我们来实现一个健壮的深拷贝函数，它能够处理循环引用、函数、undefined、Symbol 等特殊类型的数据，并尽可能地提高性能。

function deepClone(obj, map = new WeakMap()) {
  // 基本类型和 null 直接返回
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 处理循环引用
  if (map.has(obj)) {
    return map.get(obj);
  }

  // 根据 obj 的类型创建新的对象或数组
  let newObj = Array.isArray(obj) ? [] : {};

  // 将新的对象或数组放入 WeakMap 中，用于处理循环引用
  map.set(obj, newObj);

  for (let key in obj) {
    // 只拷贝对象自身的属性，不拷贝原型链上的属性
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key], map); // 递归调用深拷贝
    }
  }

  // 处理 Symbol 类型的属性
  let symbolKeys = Object.getOwnPropertySymbols(obj);
  for (let symbolKey of symbolKeys) {
    newObj[symbolKey] = deepClone(obj[symbolKey], map);
  }

  return newObj;
}

代码解释：

1. 基本类型和 null 的处理： 如果 obj 不是对象或者为 null，则直接返回 obj。这是递归的终止条件。
2. 循环引用的处理： 使用 WeakMap 来存储已经拷贝过的对象。如果当前对象已经在 WeakMap 中，则直接返回 WeakMap 中存储的拷贝对象，避免无限递归。WeakMap 的键是对象，值是拷贝后的对象。WeakMap 的特点是，当键指向的对象被垃圾回收时，WeakMap 中对应的键值对也会被自动移除，避免内存泄漏。
3. 创建新的对象或数组： 根据 obj 的类型，创建一个新的对象或数组。如果 obj 是数组，则创建一个新的空数组。如果 obj 是对象，则创建一个新的空对象。
4. 存储新的对象或数组： 将新的对象或数组放入 WeakMap 中，用于处理循环引用。
5. 拷贝对象自身的属性： 使用 for...in 循环遍历 obj 的属性。hasOwnProperty 方法用于判断属性是否是对象自身的属性，而不是原型链上的属性。对于每个属性，递归调用 deepClone 函数进行深拷贝。
6. 处理 Symbol 类型的属性： 使用 Object.getOwnPropertySymbols 方法获取对象自身的所有 Symbol 类型的属性。对于每个 Symbol 类型的属性，递归调用 deepClone 函数进行深拷贝。

示例：

const obj1 = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  },
  hobbies: ['reading', 'hiking'],
  birthday: new Date(),
  greet: function() {
    console.log('Hello, my name is ' + this.name);
  },
  [Symbol('id')]: 123
};

// 添加循环引用
obj1.circularReference = obj1;

const obj2 = deepClone(obj1);

console.log(obj1);
console.log(obj2);

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';
obj2.hobbies.push('swimming');
obj2.birthday.setDate(1);
obj2.greet = function() {
  console.log('Hi, I am ' + this.name);
};
obj2[Symbol('id')] = 456;

console.log(obj1);
console.log(obj2);

// 验证循环引用是否被正确处理
console.log(obj1.circularReference === obj1); // true
console.log(obj2.circularReference === obj2); // true
console.log(obj1.circularReference === obj2.circularReference); // false

在这个例子中，我们使用 deepClone 函数将 obj1 复制到 obj2。当我们修改 obj2 的属性时，obj1 不受影响，因为 obj2 是 obj1 的一个完全独立的副本。deepClone 函数还正确处理了循环引用，避免了无限递归。

深拷贝函数的健壮性：

我们的 deepClone 函数具有以下优点，使其更加健壮：

• 处理循环引用： 使用 WeakMap 来存储已经拷贝过的对象，避免无限递归。
• 处理特殊类型： 可以处理 Date、RegExp、Symbol 等特殊类型的数据。
• 只拷贝对象自身的属性： 使用 hasOwnProperty 方法只拷贝对象自身的属性，不拷贝原型链上的属性。
• 处理 Symbol 类型的属性： 使用 Object.getOwnPropertySymbols 方法处理 Symbol 类型的属性。
• 使用递归： 递归是实现深拷贝的自然方式，可以处理任意深度的嵌套对象。

表格总结深拷贝函数的功能：

功能	实现方式	优点
处理循环引用	使用 WeakMap 存储已拷贝对象	避免无限递归，防止栈溢出。WeakMap 的键是对象，当对象被垃圾回收时，WeakMap 中对应的键值对也会被自动移除，防止内存泄漏。
处理特殊类型	递归处理 Date、RegExp、Symbol 等类型	确保所有类型的数据都能被正确拷贝。
只拷贝自身属性	使用 hasOwnProperty 判断	避免拷贝原型链上的属性，确保拷贝的对象只包含自身定义的属性。
处理 Symbol 属性	使用 Object.getOwnPropertySymbols 获取	确保 Symbol 类型的属性也能被正确拷贝。
使用递归	递归调用 deepClone 函数	能够处理任意深度的嵌套对象，实现真正的深拷贝。

深拷贝的性能考量

深拷贝是一个耗时的操作，特别是对于大型对象。在实际应用中，需要权衡深拷贝的必要性和性能。

优化深拷贝的策略：

• 避免不必要的深拷贝： 只有在确实需要创建一个对象的完全独立的副本时才使用深拷贝。
• 使用浅拷贝代替深拷贝： 如果只需要修改对象的第一层属性，可以使用 Object.assign 进行浅拷贝。
• 增量更新： 如果只需要修改对象的部分属性，可以使用增量更新的方式，只拷贝需要修改的部分。
• 使用 Immutable 数据结构： Immutable 数据结构是不可变的数据结构，修改 Immutable 对象会返回一个新的 Immutable 对象，而不会修改原始对象。使用 Immutable 数据结构可以避免深拷贝，提高性能。

深拷贝与数据结构

深拷贝的实现方式与数据的结构息息相关。对于一些特殊的数据结构，可能需要采用特定的深拷贝策略。

示例：

• DOM 元素： 深拷贝 DOM 元素通常不是一个好主意，因为 DOM 元素包含大量的属性和方法，深拷贝 DOM 元素会消耗大量的内存和时间。如果需要复制 DOM 元素，可以考虑使用 cloneNode 方法。
• 循环图： 循环图是指图中存在环的图。深拷贝循环图需要特别小心，避免无限递归。我们的 deepClone 函数使用了 WeakMap 来处理循环引用，可以正确地深拷贝循环图。

总结：Object.assign 用于浅拷贝，健壮的深拷贝函数能处理各种类型数据

Object.assign 执行的是浅拷贝，只复制对象属性的值，如果属性的值是一个对象，则复制的是指向该对象的引用。深拷贝会递归地复制对象的所有属性，包括嵌套的对象和数组，从而创建一个与原始对象完全分离的新对象。我们实现了一个健壮的深拷贝函数，它能够处理循环引用、函数、undefined、Symbol 等特殊类型的数据。