JS深拷贝的几种实现方式

还在为JavaScript中的深拷贝问题头疼吗？本文深入探讨了JS实现深拷贝的几种方法，助你彻底理解并灵活运用。**深拷贝**旨在创建一个与原对象完全独立的新对象，修改新对象不会影响原对象，这与浅拷贝有着本质区别。文章首先分析了JSON.parse(JSON.stringify(obj))的便捷性及其局限性，如无法处理函数、undefined、Symbol和循环引用等。接着，详细讲解了如何利用**递归**和**WeakMap**缓存来构建更可靠的深拷贝函数，有效避免循环引用导致的栈溢出问题。同时，探讨了函数深拷贝的特殊性，并分析了深拷贝的性能考量，强调根据对象复杂度选择合适的深拷贝方法的重要性。最后，通过对比深拷贝和浅拷贝的应用场景，帮助开发者在性能与安全性之间做出明智选择，提升代码质量与用户体验。

深拷贝是指创建一个与原对象完全独立的新对象，修改新对象不会影响原对象。1. 实现深拷贝的方法有多种，最简单的是JSON.parse(JSON.stringify(obj))，但其无法处理函数、undefined、Symbol及循环引用。2. 更可靠的深拷贝需使用递归配合WeakMap缓存已拷贝对象，避免循环引用导致的栈溢出。3. 函数无法真正深拷贝，通常只能复制引用，通过闭包或this绑定实现行为一致。4. 性能方面，深拷贝耗时耗资源，应根据对象复杂度选择合适方法，简单对象可用JSON方法，复杂对象推荐递归或第三方库如Lodash的_.cloneDeep()。5. 应用场景上，浅拷贝适用于仅需复制引用的场景，如React状态更新；深拷贝适用于需完全隔离数据的场景，如数据备份、防止原始数据被篡改等。因此，选择深拷贝还是浅拷贝应基于具体需求权衡性能与安全性。

深拷贝，简单来说，就是创建一个新对象，这个新对象和原始对象完全独立，修改新对象不会影响到原始对象。这和浅拷贝不同，浅拷贝只是复制对象的引用，修改拷贝后的对象会影响到原始对象。

解决方案

JavaScript实现深拷贝，方法有很多，各有优劣。最简单粗暴的就是JSON.parse(JSON.stringify(obj))，但这种方法有局限性，比如不能拷贝函数、undefined、Symbol等特殊类型，而且如果对象中存在循环引用，还会报错。

更健壮的深拷贝实现需要递归遍历对象，并对不同类型的值进行特殊处理。

function deepCopy(obj, cache = new WeakMap()) {
  // 处理 null 和 undefined
  if (obj === null || typeof obj !== "object") {
    return obj;
  }

  // 处理循环引用
  if (cache.has(obj)) {
    return cache.get(obj);
  }

  let copy;
  if (Array.isArray(obj)) {
    copy = [];
  } else {
    copy = {};
  }

  cache.set(obj, copy);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key], cache);
    }
  }

  return copy;
}

// 示例
const obj = {
  name: "Alice",
  age: 30,
  address: {
    city: "New York",
    zip: 10001,
  },
  hobbies: ["reading", "coding"],
  greet: function() {
    console.log("Hello!");
  },
  symbol: Symbol('test'),
  undef: undefined
};

obj.circular = obj; // 创建循环引用

const newObj = deepCopy(obj);

newObj.name = "Bob";
newObj.address.city = "Los Angeles";
newObj.hobbies.push("hiking");

console.log("Original object:", obj);
console.log("Copied object:", newObj);

这个deepCopy函数使用递归的方式遍历对象，并且用WeakMap来缓存已经拷贝过的对象，防止循环引用导致栈溢出。 注意，函数和Symbol类型的值不会被拷贝，会丢失。 undefined会被保留。

如何处理函数类型的深拷贝？

理论上，完全深拷贝函数是不可行的，因为函数内部的状态是无法完全复制的。但是，可以考虑复制函数的引用，或者创建一个新的函数，并复制原始函数的代码。 复制函数代码涉及到解析和重构函数的抽象语法树 (AST)，比较复杂，一般不推荐。 大多数情况下，复制函数引用就足够了。

function deepCopyWithFunction(obj, cache = new WeakMap()) {
    if (obj === null || typeof obj !== "object") {
        return obj;
    }

    if (cache.has(obj)) {
        return cache.get(obj);
    }

    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else if (typeof obj === 'function') {
        // 复制函数引用
        copy = obj;
        return copy;
    }
    else {
        copy = {};
    }

    cache.set(obj, copy);

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopyWithFunction(obj[key], cache);
        }
    }

    return copy;
}

const objWithFunction = {
    name: "Alice",
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

const newObjWithFunction = deepCopyWithFunction(objWithFunction);
newObjWithFunction.name = "Bob";
newObjWithFunction.greet(); // 输出 "Hello, Bob"

objWithFunction.greet(); // 输出 "Hello, Alice"

这种方法仅仅复制了函数的引用，所以newObjWithFunction.greet()中的this.name会指向newObjWithFunction的name属性。

深拷贝的性能考量有哪些？

深拷贝是一个相对耗时的操作，特别是对于大型对象。 递归遍历和创建新对象都需要消耗大量的CPU和内存。 JSON.parse(JSON.stringify(obj)) 在处理大型对象时，效率也比较低。

在实际应用中，需要根据对象的复杂度和性能要求，选择合适的深拷贝方法。 如果对象比较简单，且不需要拷贝函数等特殊类型，JSON.parse(JSON.stringify(obj)) 是一个不错的选择。 如果对象比较复杂，且需要处理循环引用，那么就需要使用递归的方式实现深拷贝。

还可以考虑使用一些第三方库，比如Lodash的_.cloneDeep()方法，它提供了更完善的深拷贝实现，并且经过了性能优化。

深拷贝和浅拷贝的应用场景分别是什么？

浅拷贝通常用于只需要复制对象的引用，而不需要创建新对象的场景。 比如，在React中，可以使用浅拷贝来更新组件的状态，如果状态对象中的某个属性发生了变化，只需要创建一个新的状态对象，并复制其他属性的引用即可。

深拷贝则用于需要创建完全独立的对象副本的场景。 比如，在处理用户输入的数据时，可以使用深拷贝来防止恶意用户修改原始数据。 又或者，在进行数据持久化时，可以使用深拷贝来创建数据的备份，防止数据丢失。

本篇关于《JS深拷贝的几种实现方式》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！