前端进阶：一文彻底搞懂JavaScript深浅拷贝原理与实现

在JavaScript开发中，深浅拷贝是每位前端工程师都必须掌握的核心概念。无论是日常业务开发还是技术面试，它都是高频出现的知识点。然而，许多开发者在实际应用中常常混淆两者的区别，导致出现难以追踪的Bug。本文将通过步骤式教学，带你从原理到实践彻底攻克深浅拷贝。

要理解拷贝，首先必须知道JavaScript的数据类型在内存中的存储方式。原始类型（如Number、String、Boolean、Null、Undefined、Symbol、BigInt）直接存储在栈内存中，它们的值是不可变的。而引用类型（如Object、Array、Function）则分为两部分：对象本身存放在堆内存中，栈内存中存放的是指向该堆内存地址的引用地址。

这种存储机制决定了拷贝行为的分水岭：拷贝的是值，还是拷贝的是引用。

浅拷贝（Shallow Copy）指的是创建一个新对象，该对象具有原对象属性的精确副本。如果属性是原始类型，拷贝的就是值；如果属性是引用类型，则拷贝的是内存地址，即新旧对象共享同一内存区域。意味着修改新对象的引用类型属性，原对象也会变。

深拷贝（Deep Copy）则是完全递归地复制所有层级的属性，不仅拷贝对象本身，还拷贝其中所有引用类型指向的对象，最终得到与原对象完全独立的副本。修改新对象任何属性，都不会影响原对象。

最常用的浅拷贝方法有三种，我们逐一实践。

方法一：使用扩展运算符（ES6语法）。这是最简洁的写法，适合对象和数组。

const originalObj = { name: '张三', address: { city: '北京' } };
const cloneObj = { ...originalObj };
cloneObj.address.city = '上海';
console.log(originalObj.address.city); // 输出：上海（说明浅拷贝共享了引用）

方法二：使用Object.assign()。需要注意，该方法的第一个参数是目标对象。

const originalArr = [1, 2, { a: 3 }];
const cloneArr = Object.assign([], originalArr);
cloneArr[2].a = 99;
console.log(originalArr[2].a); // 输出：99（共享引用）

方法三：手动遍历循环。这种方式更灵活，适合自定义浅拷贝逻辑。

function shallowClone(obj) {
  const result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = obj[key];
    }
  }
  return result;
}

深拷贝的核心是递归处理。最经典的方法当属JSON序列化，但它存在明显缺陷：无法处理函数、undefined、Symbol、循环引用以及Date对象。

// JSON方法的局限性演示
const badObj = { fn: function() {}, date: new Date(), sym: Symbol('x') };
const jsonClone = JSON.parse(JSON.stringify(badObj));
console.log(jsonClone); // 输出：{} （fn和sym丢失，date变为字符串）

因此，我们需要手写一个健壮的深拷贝函数，处理各种边界情况。

function deepClone(target, map = new WeakMap()) {
  // 处理原始类型或函数，直接返回
  if (typeof target !== 'object' || target === null) {
    return target;
  }
  
  // 处理日期和正则
  if (target instanceof Date) return new Date(target);
  if (target instanceof RegExp) return new RegExp(target);
  
  // 解决循环引用：利用WeakMap缓存已拷贝的对象
  if (map.has(target)) {
    return map.get(target);
  }
  
  // 处理数组和普通对象
  const cloneTarget = Array.isArray(target) ? [] : {};
  map.set(target, cloneTarget);
  
  // 递归拷贝所有键（包括Symbol键）
  for (const key of Reflect.ownKeys(target)) {
    cloneTarget[key] = deepClone(target[key], map);
  }
  
  return cloneTarget;
}

// 测试循环引用
const circularObj = { name: '循环' };
circularObj.self = circularObj;
const deepCloned = deepClone(circularObj);
console.log(deepCloned.self === deepCloned); // 输出：true（完美解决）

写完后，我们进行综合性测试，确保深拷贝的正确性。

// 构造一个复杂的嵌套数据结构
const complexData = {
  user: { name: '李四', tags: ['前端', '进阶'], nested: { level: 3 } },
  metadata: null,
  timestamp: new Date('2024-01-01'),
  pattern: /ab+/g,
  array: [1, [2, [3, [4]]]]
};

const result = deepClone(complexData);
// 修改副本的深层数据
result.user.nested.level = 100;
result.array[1][1][1] = '修改';
// 验证原数据未被影响
console.log(complexData.user.nested.level); // 输出：3
console.log(complexData.array[1][1][1]); // 输出：4
console.log(result.timestamp instanceof Date); // 输出：true（保持类型）

从测试结果可以看出，深拷贝函数完全独立，且保持了各种数据类型的正确性。在实际开发中，如果不想手写，也可以使用结构化克隆算法（如HTML5的structuredClone函数）或第三方库（如lodash的cloneDeep）。

通过以上步骤，我们可以总结出选用策略：如果对象层级较浅且不包含特殊类型，简单的浅拷贝足够应对；但如果数据层级深、包含复杂类型或有完整隔离需求时，务必使用深拷贝。

最后，提醒各位：性能优化时，深拷贝会递归整个对象树，对于大数据量请谨慎使用；同时注意循环引用是深拷贝最容易踩的坑，使用WeakMap能优雅地规避。

掌握了深浅拷贝，你不仅能在面试中游刃有余，更能在实际项目中避免许多难以发现的改动源Bug。建议读者亲自动手编写一遍代码，真正内化这些知识。实践才是检验真知的标准。