【手撕代码系列】JS手写实现深拷贝

公众号：Code程序人生，分享前端所见所闻

深拷贝是在计算机科学中非常重要的概念，尤其是在处理数据结构和对象的时候。深拷贝的目的是创建一个新的对象，它有自己的内存空间，并且其中的所有值都是原始对象的副本。这样做的好处是，可以避免在修改新对象时，对原始对象产生影响。

在 JavaScript 中，我们可以使用 JSON.parse() 和 JSON.stringify() 方法来进行深拷贝，但是这种方法有一些限制，比如无法处理函数和循环引用等情况。因此，在这篇博客中，我们将手写实现深拷贝。

实现方法

首先，我们需要定义一个 deepClone 函数来进行深拷贝。这个函数接受一个对象作为参数，返回一个新的对象。在函数内部，我们需要对对象进行递归遍历，直到所有的值都被拷贝完成。
下面是一个简单的实现方法：

function deepClone(obj) {
  let clone = {};

  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      clone[key] = deepClone(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }

  return clone;
}

这个方法的实现比较简单，但是它无法处理函数和循环引用。接下来，我们将分别介绍如何处理这两种情况。

处理函数

要处理函数，我们需要在拷贝对象时，判断当前值是否为函数。如果是函数，我们需要使用Function.prototype.toString() 方法来获取函数的源代码，并使用 new Function() 来创建一个新的函数。

下面是一个实现方法：

function deepClone(obj) {
  let clone = {};

  for (let key in obj) {
    if (typeof obj[key] === "function") {
      clone[key] = new Function("return " + obj[key].toString())();
    } else if (typeof obj[key] === "object" && obj[key] !== null) {
      clone[key] = deepClone(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }

  return clone;
}

处理循环引用

循环引用是指一个对象中包含对自身的引用。处理循环引用是比较复杂的，需要使用一些技巧来判断是否已经拷贝过该对象。

一种实现方法是，使用一个 Map 对象来记录已经拷贝过的对象。每次遍历一个对象时，我们首先检查它是否已经被拷贝过。如果是，我们直接返回该对象的引用；如果不是，我们先将该对象添加到 Map 中，并递归地拷贝它的属性。

下面是一个实现方法：

function deepClone(obj, map = new Map()) {
  if (map.has(obj)) {
  	return map.get(obj);
  }
  
  let clone = {};
  
  for (let key in obj) {
  	if (typeof obj[key] === "function") {
  		clone[key] = new Function("return " + obj[key].toString())();
    } else if (typeof obj[key] === "object" && obj[key] !== null) {
      map.set(obj, clone);
      clone[key] = deepClone(obj[key], map);
    } else {
   	 	clone[key] = obj[key];
    }
	}
  
  return clone;
}

在这个方法中，我们添加了一个额外的参数 map，用来记录已经拷贝过的对象。如果该对象已经被拷贝过，我们直接返回该对象在 Map 中的引用。如果没有被拷贝过，我们将该对象添加到 Map 中，并递归地拷贝它的属性。

测试代码

为了测试我们实现的 deepClone 函数，我们可以创建一个包含不同类型的值的对象，并使用该函数进行拷贝。然后，我们可以修改拷贝后的对象，并检查原始对象是否发生了改变。 下面是一个测试代码示例：

下面是一个测试代码示例：

let originalObj = {
  a: 1,
  b: "hello",
  c: [1, 2, 3],
  d: { e: "world" },
  f: function () {
    console.log("hello world");
  },
};

let clonedObj = deepClone(originalObj);

clonedObj.a = 2;
clonedObj.b = "world";
clonedObj.c[0] = 4;
clonedObj.d.e = "world";

console.log(originalObj);
console.log(clonedObj);

输出结果如下：

{ a: 1, b: 'hello', c: [ 1, 2, 3 ], d: { e: 'world' }, f: [Function: f] }
{ a: 2, b: 'world', c: [ 4, 2, 3 ], d: { e: 'world' }, f: [Function: f] }

从输出结果可以看出，我们成功地拷贝了原始对象，并且在修改拷贝后的对象时，并没有影响到原始对象。

总结

在本篇博客中，我们介绍了如何手写实现深拷贝。我们实现了一个递归遍历对象的函数，同时处理了函数和循环引用的情况。这个方法虽然比较简单，但是它可以很好地处理大部分情况，避免在修改对象时对原始对象产生影响。

需要注意的是，手写实现深拷贝可能会带来一些性能上的问题。因为递归地遍历对象需要消耗大量的时间和内存。在处理大型对象或者嵌套层次很深的对象时，可能会出现性能问题。因此，建议在实际开发中，使用成熟的深拷贝库，如 lodash 的 cloneDeep 方法，可以更好地处理性能问题。

另外，在手写实现深拷贝时，需要特别注意循环引用的问题。循环引用可能导致死循环，使程序崩溃。因此，我们需要使用一个 Map 来记录已经拷贝过的对象，以避免出现循环引用的问题。

总的来说，手写实现深拷贝是一个非常有用的技能。在实际开发中，我们经常需要处理对象的拷贝问题，特别是当我们需要对一个对象进行修改，但是又不想对原始对象造成影响时，深拷贝就显得非常有用了。

最后，值得一提的是，深拷贝并不是万能的解决方案。在某些情况下，浅拷贝甚至是更好的选择。因此，在实际开发中，我们需要根据具体情况选择合适的拷贝方式。