前言：
深度克隆（深拷贝），一直都是面试的时候已经被问到的内容，网上介绍的实现方式也都各有千秋，大概有以下三种方式：
1. JSON.parse() + JSON.stringify(),这个很好理解；
2. 全量判断类型，根据类型做不同的处理；
3. 第二种的处理，简化类型判断过程；
前两种比较常见，今天我们一起深度学习第三种。
1、问题分析
深拷贝 自然是相对 浅拷贝 而言的。我们都知道 引用数据类型 变量存储的是数据的引用，就是一个指向内存空间的指针，所以如果我们像赋值简单数据类型那样的方式赋值的话，其实只能赋值一个指针的引用，并没有实现真正的数据克隆。
通过下面这个例子很容易就能理解：
const obj = { name: 'Barry', } const obj2 = obj; obj.name = "Lau Barry"; console.log('obj', obj); // obj {name: 'Lau Barry'} console.log('obj2', obj2); // obj2 {name: 'Lau Barry'}
所以 深度克隆 就是为了解决引用数据类型不能通过赋值的方式 复制 的问题；
2、引用数据类型
我们来罗列一下 引用数据数据类型有哪些：
·ES6之前：Object、Array、Date、RegExp、Error
·ES6之后：Map、Set、WeakMap、WeakSet
所以，我们要深度克隆，就要对数据进行遍历并根据类型采取相应的克隆方式。当然因为数据会存在多层嵌套的情况，采用 递归 是不错的选择
3、简单粗暴的深拷贝版本
function deepClone (obj) { let res = {}; // 类型判断的通用方法 function getType (val) { // return Object.prototype.toString.call(val).slice(8, -1).toLowerCase(); return Object.prototype.toString.call(val).slice(8, -1); } const type = getType(obj); console.log('type', type); const reference = ['Set', 'WeakSet', 'Map', 'WeakMap', 'Date', 'RegExp', 'Error'] switch (type) { case 'Object': for (const key in obj) { // Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。 if (Object.hasOwnProperty.call(obj, key)) { res[key] = deepClone(obj[key]) } } break; case 'Array': obj.forEach((t, i) => { res[i] = deepClone(t) }) break; case 'Date': res = new Date(obj); break; case 'RegExp': res = new RegExp(obj); break; case 'Map': res = new Map(obj); break; case 'Set': res = new Set(obj); break; case 'WeakMap': res = new WeakMap(obj); break; case 'WeakSet': res = new WeakSet(obj) break; case 'Error': res = new Error(obj) break; default: res = obj; break; } return res } const res = { name: 'barry', age: 18, hobby: ['健身', '游泳', '读书'], about: { height: 180, weight: 155, } } const res2 = deepClone(res); res2.name = 'barry222'; res2.hobby[3] = '看报'; res2.about['eat'] = 'meat' console.log('res', res); console.log('res2', res2);
其实这就是我们最前面提到的第二种方式，很傻对不对，一眼就能看出来有很多冗余代码可以合并。
4、基本优化 --- 合并冗余代码
将一眼就能看出来的冗余代码合并一下
function deepClone (obj) { let res = null; // 类型判断的通用方法 function getType (val) { // return Object.prototype.toString.call(val).slice(8, -1).toLowerCase(); return Object.prototype.toString.call(val).slice(8, -1); } const type = getType(obj); console.log('type', type); const reference = ['Set', 'WeakSet', 'Map', 'WeakMap', 'Date', 'RegExp', 'Error'] if (type === 'Object') { res = {}; for (const key in obj) { if (Object.hasOwnProperty.call(obj, key)) { res[key] = deepClone(obj[key]) } } } else if (type === 'Array') { res = []; obj.forEach((t, i) => { res[i] = deepClone(obj[t]) }) } else if (reference.includes(type)) { res = new obj.constructor(obj) } else { res = obj } return res }
为了验证代码的正确性，我们用下面这个数据验证下：
const res = { cardID: Symbol(411381), name: 'barry', age: 18, smoke: false, money: null, hobby: ['健身', '游泳', '读书'], about: { height: 180, weight: 155, }, say: () => { console.log('say Hello'); }, calc: function (a, b) { return a + b }, } const res2 = deepClone(res); res2.name = 'barry222'; res2.hobby[3] = '看报'; res2.about['eat'] = 'meat' console.log('res', res); console.log('res2', res2);
执行结果：
5、还有进一步优化的空间吗?
答案当然是肯定的
// 把判断类型的方法移到外部，避免递归的过程中多次执行 // 类型判断的通用方法 function getType (val) { return Object.prototype.toString.call(val).slice(8, -1); } function deepClone (obj) { let res = null; const reference = ['Set', 'WeakSet', 'Map', 'WeakMap', 'Date', 'RegExp', 'Error'] if (reference.includes(obj?.constructor)) { res = new obj.constructor(obj) } else if (Array.isArray(obj)) { res = []; obj.forEach((t, i) => { res[i] = deepClone(t) }) } else if (typeof obj === 'object' && obj !== null) { res = {}; for (const key in obj) { if (Object.hasOwnProperty.call(obj, key)) { res[key] = deepClone(obj[key]) } } } else { res = obj } return res } const res = { cardID: Symbol(411381), name: 'barry', age: 18, smoke: false, money: null, hobby: ['健身', '游泳', '读书'], about: { height: 180, weight: 155, }, say: () => { console.log('say Hello'); }, calc: function (a, b) { return a + b }, } const res2 = deepClone(res); res2.name = 'barry222'; res2.hobby[3] = '看报'; res2.about['eat'] = 'meat' res2.about.height = 185; res2.money = 999999999999; console.log('res', res); console.log('res2', res2);
6、最后，还有循环引用问题，避免出现无限循环的问题
我们用hash来存储已经加载过的对象，如果已经存在的对象，就直接返回。
function deepClone (obj, hash = new WeakMap()) { if (hash.has(obj)) { return obj } let res = null; const reference = ['Set', 'WeakSet', 'Map', 'WeakMap', 'Date', 'RegExp', 'Error']; if (reference.includes(obj?.constructor)) { res = new obj.constructor(obj) } else if (Array.isArray(obj)) { res = []; obj.forEach((t, i) => { res[i] = deepClone(t) }) } else if (typeof obj === 'object' && obj !== null) { hash.set(obj); res = {}; for (const key in obj) { if (Object.hasOwnProperty.call(obj, key)) { res[key] = deepClone(obj[key], hash) } } } else { res = obj } return res } const res = { cardID: Symbol(411381), name: 'barry', age: 18, smoke: false, money: null, hobby: ['健身', '游泳', '读书'], about: { height: 180, weight: 155, }, say: () => { console.log('say Hello'); }, calc: function (a, b) { return a + b }, } const res2 = deepClone(res); res2.name = 'barry222'; res2.hobby[3] = '看报'; res2.about['eat'] = 'meat' res2.about.height = 185; res2.money = 999999999999; console.log('res', res); console.log('res2', res2);
