JavaScript深度克隆：原理、实现与优化策略-js教程-PHP中文网

JavaScript深度克隆：原理、实现与优化策略

霞舞

发布： 2025-11-28 13:58:19

原创

594人浏览过

JavaScript深度克隆：原理、实现与优化策略

本文深入探讨javascript中对象深度克隆的原理与实现。我们将从浅拷贝的局限性出发，逐步介绍如何通过递归方法实现自定义深度克隆函数，有效处理嵌套对象、数组及循环引用等复杂场景。文章将提供优化的代码示例，并讨论不同克隆策略的适用性与注意事项，旨在帮助开发者构建健壮的数据处理逻辑。

引言：理解浅拷贝与深拷贝

在JavaScript中，当我们处理对象和数组时，经常会遇到拷贝的需求。拷贝操作通常分为两种：浅拷贝（Shallow Copy）和深拷贝（Deep Copy）。理解它们之间的区别对于避免数据意外修改至关重要。

浅拷贝只复制对象或数组的第一层属性。如果属性值是基本类型（如字符串、数字、布尔值等），则直接复制；如果属性值是引用类型（如另一个对象或数组），则只复制其引用地址，而不是其内部数据。这意味着，原对象和拷贝对象会共享这些引用类型属性，对其中一个的修改会影响另一个。

例如，使用Object.assign()或展开运算符...进行浅拷贝：

const original = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  },
  hobbies: ['reading', 'coding']
};

const shallowCopy = { ...original };

console.log('--- 浅拷贝示例 ---');
console.log('原始对象:', original);
console.log('浅拷贝对象:', shallowCopy);

// 修改基本类型属性，互不影响
shallowCopy.age = 31;
console.log('修改浅拷贝对象的age后，原始对象age:', original.age); // 30

// 修改引用类型属性，互相影响
shallowCopy.address.city = 'Los Angeles';
console.log('修改浅拷贝对象的address.city后，原始对象address.city:', original.address.city); // Los Angeles

shallowCopy.hobbies.push('hiking');
console.log('修改浅拷贝对象的hobbies后，原始对象hobbies:', original.hobbies); // ['reading', 'coding', 'hiking']

登录后复制

从上述示例可以看出，浅拷贝在处理嵌套的引用类型数据时存在局限性，无法实现完全独立的数据副本。

立即学习“Java免费学习笔记（深入）”；

深拷贝则会递归地复制对象或数组的所有层级属性，无论其是基本类型还是引用类型。最终，深拷贝生成的新对象与原对象之间完全独立，互不影响。这在需要完全隔离数据副本的场景中至关重要，例如在状态管理、撤销/重做功能或避免副作用时。

核心挑战：递归与数据类型处理

实现一个健壮的深度克隆函数面临以下几个核心挑战：

递归遍历：需要递归地访问对象或数组的所有嵌套层级。
数据类型判断：正确区分基本类型、普通对象、数组以及其他特殊内置对象（如Date、RegExp等）。
循环引用：当对象内部存在相互引用时，如果不加以处理，递归将导致无限循环，最终栈溢出。
特殊对象类型：如何处理Map、Set、Symbol、Function、Promise、DOM节点等特殊JavaScript数据类型。

构建自定义深度克隆函数

为了克服上述挑战，我们可以构建一个自定义的递归深度克隆函数。下面是一个经过优化的实现，它考虑了基本类型、对象、数组以及循环引用，并对一些常见内置对象进行了特殊处理。

摩笔天书

摩笔天书AI绘本创作平台

135

查看详情

/**
 * 深度克隆函数
 * @param {any} obj - 要克隆的对象或值
 * @param {WeakMap} hash - 用于存储已克隆对象的WeakMap，处理循环引用
 * @returns {any} - 克隆后的对象或值
 */
function deepClone(obj, hash = new WeakMap()) {
  // 1. 处理原始值和null
  // 如果是null或者非对象类型（包括number, string, boolean, undefined, symbol, function），直接返回
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  // 2. 处理特殊内置对象（无需深度克隆，直接返回新实例或原引用）
  // Date对象：返回新的Date实例
  if (obj instanceof Date) {
    return new Date(obj);
  }
  // RegExp对象：返回新的RegExp实例
  if (obj instanceof RegExp) {
    return new RegExp(obj);
  }
  // Function、Symbol等：通常直接返回原引用，因为函数行为不应被克隆
  if (typeof obj === 'function' || typeof obj === 'symbol') {
    return obj;
  }
  // Map和Set需要更复杂的处理，这里暂时返回新实例，但内部元素仍需递归克隆
  if (obj instanceof Map) {
      const newMap = new Map();
      hash.set(obj, newMap); // 存储克隆引用
      obj.forEach((value, key) => {
          newMap.set(deepClone(key, hash), deepClone(value, hash));
      });
      return newMap;
  }
  if (obj instanceof Set) {
      const newSet = new Set();
      hash.set(obj, newSet); // 存储克隆引用
      obj.forEach(value => {
          newSet.add(deepClone(value, hash));
      });
      return newSet;
  }

  // 3. 处理循环引用：避免无限循环
  // 在递归之前检查当前对象是否已被克隆过，如果存在，直接返回其克隆副本
  if (hash.has(obj)) {
    return hash.get(obj);
  }

  // 4. 初始化克隆对象（根据原对象类型）
  // 如果是数组，则初始化为空数组；否则初始化为空对象
  let clone = Array.isArray(obj) ? [] : {};
  // 在递归克隆其属性/元素之前，将当前对象及其克隆副本存入WeakMap
  // 这一步至关重要，它允许在后续递归中遇到循环引用时，直接返回这个“半成品”的克隆对象
  hash.set(obj, clone);

  // 5. 递归克隆属性/元素
  // 遍历对象的所有可枚举属性
  for (let key in obj) {
    // 确保只克隆对象自身的属性，不包括原型链上的属性
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }

  return clone;
}

登录后复制

代码解析：

基本类型和null处理：这是递归的终止条件。基本类型和null是不可变的，直接返回它们的值即可。
特殊内置对象处理：Date和RegExp对象需要创建新的实例来完成深拷贝。Function和Symbol等通常不进行深拷贝，直接返回原引用更符合实际需求。Map和Set需要遍历其内部元素并递归克隆。
循环引用处理 (WeakMap)：这是防止无限循环的关键。
- WeakMap是一个弱引用映射，其键必须是对象，当键不再被引用时，垃圾回收机制会自动清理WeakMap中的对应条目，避免内存泄漏。
- 在每次递归开始时，我们首先检查obj是否已存在于hash中。如果存在，说明之前已经开始克隆这个对象，并且当前是循环引用，直接返回hash中存储的克隆副本。
- 在创建clone对象后，立即将其与原obj一起存入hash。这样做是为了在obj的属性中遇到对obj自身的引用时，能够正确返回clone对象，而不是再次进入无限递归。
初始化克隆对象：根据obj的类型（数组或普通对象）创建相应的空容器。
递归克隆属性/元素：
- 使用for...in循环遍历对象的可枚举属性。
- Object.prototype.hasOwnProperty.call(obj, key)用于确保只处理对象自身的属性，忽略原型链上的属性，这增加了函数的健壮性。
- 对每个属性值再次调用deepClone进行递归克隆。

示例用法：

const originalA = {
  foo: 'bar',
  obj: {
    a: 1,
    b: 2,
    nestedArr: [3, {c: 4}],
    date: new Date(),
    regexp: /test/i
  },
  arr: [{id: 1}, {id: 2}],
  map: new Map([['key1', 'value1'], ['key2', {data: 'value2'}]]),
  set: new Set([1, {s: 2}, 3])
};

// 制造一个循环引用
originalA.obj.self = originalA;

const clonedA = deepClone(originalA);

console.log('\n--- 深度克隆示例 ---');
console.log('原始对象:', originalA);
console.log('深度克隆对象:', clonedA);

// 验证顶层对象是否不同
console.log('originalA !== clonedA:', originalA !== clonedA); // true

// 验证嵌套对象是否不同
console.log('originalA.obj !== clonedA.obj:', originalA.obj !== clonedA.obj); // true

// 验证嵌套数组是否不同
console.log('originalA.arr !== clonedA.arr:', originalA.arr !== clonedA.arr); // true
console.log('originalA.arr[0] !== clonedA.arr[0]:', originalA.arr[0] !== clonedA.arr[0]); // true

// 验证日期和正则是否不同实例
console.log('originalA.obj.date !== clonedA.obj.date:', originalA.obj.date !== clonedA.obj.date); // true
console.log('originalA.obj.regexp !== clonedA.obj.regexp:', originalA.obj.regexp !== clonedA.obj.regexp); // true

// 验证循环引用是否正确处理
console.log('clonedA.obj.self === clonedA:', clonedA.obj.self === clonedA); // true

// 验证修改克隆对象是否不影响原始对象
clonedA.obj.a = 99;
clonedA.arr[0].id = 100;
clonedA.map.set('key1', 'newValue');
clonedA.set.add(4);

console.log('修改克隆对象后：');
console.log('原始对象 originalA.obj.a:', originalA.obj.a); // 1
console.log('原始对象 originalA.arr[0].id:', originalA.arr[0].id); // 1
console.log('原始对象 originalA.map.get("key1"):', originalA.map.get('key1')); // value1
console.log('原始对象 originalA.set.has(4):', originalA.set.has(4)); // false

登录后复制

其他深度克隆方案

除了自定义递归函数，JavaScript还提供了其他实现深拷贝的方法，各有优缺点：

1. JSON.parse(JSON.stringify(obj))

这种方法利用JSON序列化和反序列化的过程来实现深拷贝。

const obj1 = { a: 1, b: { c: 2 } };
const clonedObj1 = JSON.parse(JSON.stringify(obj1));
console.log('\n--- JSON方法克隆 ---');
console.log(clonedObj1); // { a: 1, b: { c: 2 } }

登录后复制

优点：