一、理解拷贝的本质与必要性

在JavaScript中，数据类型分为原始类型（Number/String/Boolean等）和引用类型（Object/Array等）。原始类型的变量存储的是实际值，而引用类型存储的是内存地址的指针。这种设计导致直接赋值时，引用类型会形成共享引用，修改副本会影响原对象。

例如：

const original = { a: 1 };
const copy = original;
copy.a = 2;
console.log(original.a); // 输出2

这种特性在复杂对象操作中极易引发bug，因此需要实现对象拷贝来创建独立副本。拷贝分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy），区别在于对嵌套对象的处理方式。

二、浅拷贝的实现与原理

1. 浅拷贝的定义

浅拷贝仅复制对象的第一层属性，对于嵌套对象仍保持引用关系。适用于结构简单的扁平对象。

2. 手写实现方案

（1）展开运算符实现

function shallowCopy(obj) {
  return { ...obj };
}
// 测试
const original = { a: 1, b: { c: 2 } };
const copy = shallowCopy(original);
copy.b.c = 3;
console.log(original.b.c); // 输出3（嵌套对象被共享）

（2）Object.assign实现

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

（3）数组的浅拷贝

// 展开运算符
const arrCopy = [...originalArr];
// slice方法
const arrCopy = originalArr.slice();

3. 浅拷贝的局限性

• 无法处理多层嵌套对象
• 特殊对象（Date/RegExp等）会被转为普通对象
• 函数属性会被复制但可能丢失上下文

三、深拷贝的实现与优化

1. 深拷贝的定义

递归复制所有层级的属性，创建完全独立的副本。需要处理循环引用等特殊情况。

2. 基础递归实现

function deepCopy(obj, hash = new WeakMap()) {
  // 处理基本类型和null/undefined
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  // 处理循环引用
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  // 处理特殊对象类型
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  // 创建新对象并记录映射
  const newObj = Array.isArray(obj) ? [] : {};
  hash.set(obj, newObj);
  // 递归复制属性
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key], hash);
    }
  }
  return newObj;
}

3. 性能优化方案

（1）JSON序列化方案（简单但有局限）

function deepCopy(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// 缺陷：
// 1. 无法处理函数、Symbol、undefined
// 2. 会丢失对象原型链
// 3. 无法处理循环引用

（2）消息通道方案（处理特殊对象）

function deepCopy(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}
// 缺陷：异步操作，仅适用于特定场景

4. 生产环境建议

• 简单场景：使用lodash的_.cloneDeep
• 复杂场景：结合WeakMap处理循环引用
• 性能敏感场景：考虑结构化克隆API（structuredClone）

四、最佳实践与注意事项

1. 拷贝策略选择

• 浅拷贝适用场景：配置对象、简单数据结构
• 深拷贝适用场景：状态管理、复杂对象操作

2. 性能对比（百万次操作耗时）

方法	耗时(ms)	备注
JSON.stringify	120	简单但有局限
递归实现	450	最完整方案
展开运算符	80	仅浅拷贝

3. 特殊对象处理

// 处理Map/Set
function deepCopy(obj, hash = new WeakMap()) {
  if (obj instanceof Map) {
    const copy = new Map();
    hash.set(obj, copy);
    obj.forEach((v, k) => copy.set(deepCopy(k, hash), deepCopy(v, hash)));
    return copy;
  }
  // Set处理类似...
}

4. 循环引用检测

// 循环引用示例
const obj = {};
obj.self = obj;
// 使用WeakMap记录已拷贝对象
function deepCopy(obj, hash = new WeakMap()) {
  if (hash.has(obj)) return hash.get(obj);
  // ...其他实现
}

五、现代JavaScript的解决方案

1. 结构化克隆API（Chrome 75+）

const original = { a: 1, b: new Date() };
const copy = structuredClone(original);
// 支持：Date, RegExp, Map, Set, Blob等
// 不支持：函数、DOM节点

2. 第三方库对比

库	大小	特点
lodash	72KB	功能全面
rambda	5KB	函数式风格
immutable.js	40KB	持久化数据结构

六、实战案例分析

案例1：React状态管理

// 错误示范：直接修改state
setState(prevState => {
  prevState.items[0].name = 'new'; // 不推荐
  return prevState;
});
// 正确做法：深拷贝
setState(prevState => {
  const newState = deepCopy(prevState);
  newState.items[0].name = 'new';
  return newState;
});

案例2：表单数据处理

// 浅拷贝导致表单联动问题
const formData = { user: { name: '' } };
const copy = { ...formData };
// 深拷贝解决方案
const copy = deepCopy(formData);

七、总结与建议

1. 评估需求：根据对象复杂度选择拷贝方式
2. 性能考量：简单对象优先使用浅拷贝
3. 安全边界：处理循环引用和特殊对象
4. 现代方案：优先考虑structuredClone API
5. 测试验证：编写单元测试验证拷贝结果

推荐实现模板：

const copyUtils = {
  shallow: obj => ({ ...obj }),
  deep: (obj) => {
    if (typeof structuredClone === 'function') {
      return structuredClone(obj);
    }
    // 回退到自定义实现...
  }
};

通过系统掌握深浅拷贝的原理和实现，开发者可以更安全地处理对象操作，避免因共享引用导致的难以调试的问题，提升代码的健壮性和可维护性。