Object.assign 是深拷贝还是浅拷贝？

摘要

浅拷贝和深拷贝的定义和区别：

浅拷贝‌：只复制对象的指针，新旧指针均指向同一堆内存对象。如果使用新指针对对象进行操作，会影响原对象‌

深拷贝‌：会在堆内存中另外复制存储一个一模一样的对象，新指针指向的是新对象而非旧对象。使用新指针对对象进行操作不会影响原对象‌

Object.assign用于将一个或多个源对象的属性复制到目标对象中。它执行的是浅拷贝，而不是深拷贝。

Object.assign() 概览

基本用法

const obj = { a: 1, b: { c: 2 } };
const obj2 = { d: 3 };

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

console.log(mergedObj);
// 输出: { a: 1, b: { c: 2 }, d: 3 }

浅拷贝的陷阱

浅拷贝的特性意味着如果源对象中包含对象或数组，那么它们的引用将被复制到新的对象中。这可能导致问题，尤其是在修改新对象时，原始对象也会受到影响。

const obj = { a: 1, b: { c: 2 } };
const clonedObj = Object.assign({}, obj);
clonedObj.b.c = 3;

console.log(obj);         // { a: 1, b: { c: 3 } }
console.log(clonedObj);   // { a: 1, b: { c: 3 } }

在这个例子中，修改 clonedObj 的属性也会影响到原始对象 obj。

深拷贝的需求

1. 使用 JSON 序列化和反序列化

const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = JSON.parse(JSON.stringify(obj));
deepClonedObj.b.c = 3;

console.log(obj);            // { a: 1, b: { c: 2 } }
console.log(deepClonedObj);  // { a: 1, b: { c: 3 } }

这种方法利用了 JSON 的序列化和反序列化过程，通过将对象转换为字符串，然后再将字符串转换回对象，实现了一个全新的深拷贝对象。

需要注意的是，这种方法有一些限制，例如无法处理包含循环引用的对象，以及一些特殊对象（如 RegExp 对象）可能在序列化和反序列化过程中失去信息。

2. 使用递归实现深拷贝

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  const clonedObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }

  return clonedObj;
}

const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = deepClone(obj);
deepClonedObj.b.c = 3;

console.log(obj);            // { a: 1, b: { c: 2 } }
console.log(deepClonedObj);  // { a: 1, b: { c: 3 } }

这是一个递归实现深拷贝的方法。它会递归地遍历对象的属性，并创建它们的副本。这种方法相对灵活，可以处理各种情况。

但需要注意在处理大型对象或深度嵌套的对象时可能会导致栈溢出。

3. 使用第三方库

最常用的是 lodash 库中的 _.cloneDeep 方法。

const _ = require('lodash');

const obj = { a: 1, b: { c: 2 } };
const deepClonedObj = _.cloneDeep(obj);
deepClonedObj.b.c = 3;

console.log(obj);            // { a: 1, b: { c: 2 } }
console.log(deepClonedObj);  // { a: 1, b: { c: 3 } }