手写深浅拷贝：从原理到实践的完整指南

在JavaScript开发中，数据拷贝是高频操作却暗藏陷阱。当直接赋值对象/数组时，看似独立的变量实则共享同一内存地址，这种隐式引用关系常导致意外的数据污染。本文将系统拆解深浅拷贝的实现原理，通过手写代码演示核心逻辑，并给出生产环境中的最佳实践方案。

一、浅拷贝的实现与局限

1.1 浅拷贝的核心原理

浅拷贝仅复制对象的第一层属性，对于嵌套对象或数组仍保持引用关系。其本质是创建新对象并复制原始对象的可枚举属性。

// 基础浅拷贝实现
function shallowCopy(source) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = source[key];
    }
  }
  return target;
}

1.2 浅拷贝的适用场景

• 对象不包含嵌套结构时
• 需要快速复制且不关心内部引用时
• 性能敏感场景（O(n)时间复杂度）

1.3 浅拷贝的典型问题

const original = { a: 1, b: { c: 2 } };
const copied = shallowCopy(original);
copied.b.c = 3;
console.log(original.b.c); // 输出3，原始对象被修改

二、深拷贝的完整实现

2.1 递归实现的深拷贝

function deepCopy(source, hash = new WeakMap()) {
  // 处理基本类型和null/undefined
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  // 处理循环引用
  if (hash.has(source)) {
    return hash.get(source);
  }
  // 处理Date和RegExp对象
  if (source instanceof Date) return new Date(source);
  if (source instanceof RegExp) return new RegExp(source);
  // 创建新对象或数组
  const target = Array.isArray(source) ? [] : {};
  hash.set(source, target);
  // 递归复制属性
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = deepCopy(source[key], hash);
    }
  }
  // 处理Symbol属性
  const symbolKeys = Object.getOwnPropertySymbols(source);
  for (const symKey of symbolKeys) {
    target[symKey] = deepCopy(source[symKey], hash);
  }
  return target;
}

2.2 关键实现细节解析

1. 循环引用处理：使用WeakMap记录已复制对象，防止递归栈溢出
2. 特殊对象处理：Date/RegExp等对象需要特殊构造
3. Symbol属性支持：通过getOwnPropertySymbols获取Symbol键
4. 性能优化：WeakMap避免内存泄漏，递归终止条件明确

2.3 深拷贝的边界情况

// 测试循环引用
const obj = { a: 1 };
obj.self = obj;
const cloned = deepCopy(obj);
console.log(cloned.self === cloned); // true
// 测试Buffer对象
const buf = Buffer.from('test');
const bufCopy = deepCopy(buf);
console.log(bufCopy.toString()); // 'test'

三、生产环境优化方案

3.1 性能对比分析

拷贝方式	时间复杂度	内存消耗	适用场景
浅拷贝	O(n)	低	简单对象
递归深拷贝	O(n^2)	高	复杂对象
结构化克隆	O(n)	中	浏览器环境

3.2 结构化克隆API

现代浏览器提供的structuredClone方法：

const original = { a: 1, b: new Date() };
const cloned = structuredClone(original);

优势：

• 内置循环引用处理
• 支持更多内置对象类型
• 性能优于手动递归

局限：

• Node.js环境需polyfill
• 无法复制函数和DOM节点

3.3 序列化方案对比

// JSON序列化方案
function jsonDeepCopy(source) {
  return JSON.parse(JSON.stringify(source));
}
// 问题：
// 1. 丢失函数和Symbol
// 2. 无法处理循环引用
// 3. Date对象变为字符串

四、最佳实践建议

4.1 选择策略指南

1. 简单对象：优先使用浅拷贝或展开运算符

   const shallow = { ...original };
   const shallowArr = [...originalArr];

2. 复杂对象：
   • 浏览器环境：使用structuredClone
   • Node.js环境：实现带缓存的深拷贝函数
3. 性能敏感场景：考虑不可变数据结构（如Immutable.js）

4.2 工具函数封装

const copyUtils = {
  shallow: (source) => {
    if (Array.isArray(source)) return [...source];
    return { ...source };
  },
  deep: (source) => {
    if (typeof window !== 'undefined' && window.structuredClone) {
      return structuredClone(source);
    }
    return deepCopy(source); // 使用前文实现的deepCopy
  },
  isPlainObject: (obj) => {
    return Object.prototype.toString.call(obj) === '[object Object]';
  }
};

4.3 测试用例设计

describe('拷贝工具测试', () => {
  test('浅拷贝测试', () => {
    const original = { a: 1, b: { c: 2 } };
    const copied = copyUtils.shallow(original);
    copied.a = 3;
    expect(original.a).toBe(1);
    expect(copied.b.c).toBe(2); // 嵌套对象仍引用
  });
  test('深拷贝测试', () => {
    const original = { a: 1, b: new Date() };
    const copied = copyUtils.deep(original);
    copied.b.setFullYear(2000);
    expect(original.b.getFullYear()).not.toBe(2000);
  });
});

五、进阶思考

5.1 不可变数据模式

采用Immutable.js等库可以：

• 避免显式拷贝操作
• 通过结构共享提升性能
• 提供持久化数据结构

5.2 性能优化方向

1. 分治策略：对大型对象分块处理
2. 缓存机制：记忆化已复制对象
3. 并行处理：Web Workers中执行拷贝

5.3 类型安全考虑

TypeScript实现示例：

function deepCopyTyped<T>(source: T): T {
  // 实现与deepCopy类似，但添加类型断言
  return deepCopy(source) as T;
}

结语

掌握深浅拷贝的实现原理不仅是技术能力的体现，更是构建健壮应用的基础。从简单的浅拷贝到完善的深拷贝实现，每个细节都影响着系统的稳定性和性能。在实际开发中，应根据具体场景选择最优方案，并在工具函数封装时充分考虑边界情况和可维护性。通过理解这些底层机制，开发者能够更自信地处理复杂数据结构，避免常见的陷阱和bug。