公众号：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 来记录已经拷贝过的对象，以避免出现循环引用的问题。
总的来说，手写实现深拷贝是一个非常有用的技能。在实际开发中，我们经常需要处理对象的拷贝问题，特别是当我们需要对一个对象进行修改，但是又不想对原始对象造成影响时，深拷贝就显得非常有用了。
最后，值得一提的是，深拷贝并不是万能的解决方案。在某些情况下，浅拷贝甚至是更好的选择。因此，在实际开发中，我们需要根据具体情况选择合适的拷贝方式。
