引言

在各个社区查找使用原生js实现深克隆的方法，众说纷纭，大多数实现效果并不理想，在此将各家之言总结一下，得出一个完美的解决方案。

本文参考以下文章，感兴趣者请移步到原文链接。

• JS类型判断、对象克隆、数组克隆
• JS中如何进行对象的深拷贝
• 关于JSON.parse(JSON.stringify(obj))实现深拷贝应该注意的坑

浅克隆与深克隆

浅克隆

• 原始类型为值传递，对象类型仍为引用传递。
• 原始类型即使我们采用普通的克隆方式仍能得到正确的结果，原因就是原始类型存储的是对象的实际数据。

深克隆

• 所有元素或属性均完全复制，与原对象完全脱离。
• 深克隆不是将原对象的引用赋值给新对象，而是新建一个对象，引用地址与原对象引用地址不同，再将原对象属性拷贝到新对象中。

浅克隆的实现探索

数值克隆的实现 -->ok

 const a = 1;let b = a;console.log(b);//1b = 2;console.log(a);// 1console.log(b);// 2
复制代码

字符串克隆的实现 -->ok

  const c="1";let d=c;console.log(d);//"1"d="2";console.log(c);// "1"console.log(d);//"2"
复制代码

布尔值克隆的实现 -->ok

  const x = true;let y = x;console.log(y);//truey = false;console.log(x);// trueconsole.log(y);//false
复制代码

Symbol值克隆的实现 -->ok

  const s1 = Symbol('foo');let s2 = s1;console.log(s2);//Symbol(foo)console.log(s2 === s1);//trues2 = Symbol('bar');console.log(s1, s2); //Symbol(foo) Symbol(bar)console.log(s2 === s1);//false
复制代码

函数克隆的实现 -->ok

  const m = function () {alert(1); };let n = m;n();//1n = function () {alert(2); };m();//1n();//2
复制代码

对象克隆的实现 --> not ok

  let obj = {a: 1,b: 2}let obj2 = obj;console.log(obj);//{a: 1,b: 2}console.log(obj2);//{a: 1,b: 2}obj.a = 8;console.log(obj);//{a: 8,b: 2}console.log(obj2);//{a: 8,b: 2}//obj2 = obj 是值的引用，指向同一个地址值，其中一个发生变化，会影响另一个
复制代码

数组克隆的实现 --> not ok

因为：数组中可以嵌套对象，对象无法实现深克隆，数组也不能。

深克隆的实现探索

经典的 json 方法实现深克隆-->非完美解决方法

  function Person(name) {this.name = name;}const Jack = new Person('Jack');const obj = {a: 1,b: function (arg) {console.log('我是独一无二的，json复制不了我');},c: {d: 3,e: {f: [1,[2,[3,[4,[5]]]]],g: {h: 5}}},date: [new Date(1536627600000), new Date(1540047600000)],reg: new RegExp('\\w+'),num: [NaN, Infinity, -Infinity],person: Jack,};//json方法克隆let obj2 = JSON.parse(JSON.stringify(obj));console.log(obj);console.log(obj2);obj.c.e.f = 1000;//改变源对象的值obj2.c.e.g.h = 2000;//改变克隆对象的值console.log(obj.c.e.f, obj2.c.e.f);console.log( obj.c.e.g.h, obj2.c.e.g.h);
复制代码

运行结果：

由此可知 json 克隆方法有下列缺点：

1. 如果 obj 里面有时间对象（案例date），则 JSON.stringify 后再 JSON.parse 的结果，时间将只是字符串的形式。而不是时间对象
2. 如果 obj 里有 RegExp、Error 对象（案例reg），则序列化的结果将只得到空对象
3. 如果 obj 里有函数（案例b），undefined，则序列化的结果会把函数或 undefined 丢失
4. 如果 obj 里有 NaN、Infinity 和 -Infinity，则序列化的结果会变成 null
5. JSON.stringify() 只能序列化对象的可枚举的自有属性，例如 如果 obj 中的对象（案例person）是有构造函数生成的， 则使用 JSON.parse(JSON.stringify(obj)) 深拷贝后，会丢弃对象的 constructor，所有的构造函数会指向 Object
6. 如果对象中存在循环引用的情况也无法正确实现深拷贝 因此，我们可以得到结论：json 克隆的方法仅适用于简单数据类型的克隆或者仅携带简单数据的引用数据类型。

网络常见的实现深克隆的方法 -->非完美解决方法

  //数据初始化function Person(name) {this.name = name;}const Jack = new Person('Jack');const obj = {a: 1,b: function (arg) {console.log('复制我，你牛逼');},c: {d: 3,e: {f: [1,[2,[3,[4,[5]]]]],g: {h: 5}}},date: [new Date(1536627600000), new Date(1540047600000)],reg: new RegExp('\\w+'),num: [NaN, Infinity, -Infinity],person: Jack,};//深克隆实现方法function deepClone(origin, target) {const tar = target || {};for (let item in origin) {if (origin.hasOwnProperty(item)) {if (typeof origin[item] === 'object') {tar[item] = Object.prototype.toString.call(origin[item]) === '[object Array]' ? [] : {};deepClone(origin[item], tar[item]);} else {tar[item] = origin[item];}}}return tar;}//验证代码let obj2 = deepClone(obj, {});console.log(obj);console.log(obj2);obj.c.e.f = 1000;obj2.c.e.g.h = 2000;console.log(obj.c.e.f, obj2.c.e.f);console.log( obj.c.e.g.h, obj2.c.e.g.h);
复制代码

运行结果：

由结果可知，该函数仍有不足：

1. 如果obj里面有时间对象（案例date），则得到结果，时间将只是空对象
2. 如果obj里有RegExp、Error对象（案例reg），则序列化的结果将只得到空对象
3. 如果obj中的对象（person）是有构造函数生成的， 则使用该深拷贝后，会丢弃对象的constructor；

因此，该函数虽未能完美实现所有类型的深克隆，但对于日常开发足矣，日常开发一般只需要完成对象或数组的克隆，如不考虑时间对象、RegExp、Error对象和由构造函数生成的对象，该方法完全足够。

原生js实现深克隆 -->完美解决方法一

  //数据初始化function Person(name) {this.name = name;}const Jack = new Person('Jack');const obj = {a: 1,b: function (arg) {console.log('复制我，你牛逼');},c: {d: 3,e: {f: [1,[2,[3,[4,[5]]]]],g: {h: 5}}},date: [new Date(1536627600000), new Date(1540047600000)],reg: new RegExp('\\w+'),num: [NaN, Infinity, -Infinity],person: Jack,};//深克隆函数function deepClone(data) {const type = this.judgeType(data);let obj;if (type === 'Array') {obj = [];for (let i = 0, len = data.length; i < len; i++ ) {obj.push(this.deepClone(data[i]));}} else if (type === 'Object') {obj = new data.constructor ();//可保持继承链,解决该问题：如果obj中的对象是由构造函数生成的，则使用深拷贝后，会丢弃对象的constructor；for (let key in data) {obj[key] = this.deepClone(data[key]);//实现深克隆的关键}} else {return data;}return obj;}//判断类型函数function judgeType(obj) {if (obj instanceof Element) {return 'element';}return Object.prototype.toString.call(obj).slice(8,-1);}//验证代码let obj2 = deepClone(obj);console.log(obj);console.log(obj2);obj.c.e.f = 1000;obj2.c.e.g.h = 2000;console.log(obj.c.e.f, obj2.c.e.f);console.log( obj.c.e.g.h, obj2.c.e.g.h);
复制代码

运行结果：

由运行结果可知，该方法完全实现了所有数据类型的深克隆，是解决深克隆的完美方案之一，鉴定完毕！但这代码量是不是多了些？！其实还可以再优化，欢迎大家评论优化。

原生js实现深克隆 -->完美解决方法二

  //数据初始化function Person(name) {this.name = name;}const Jack = new Person('Jack');const obj = {a: 1,b: function (arg) {console.log('复制我，你牛逼');},c: {d: 3,e: {f: [1,[2,[3,[4,[5]]]]],g: {h: 5}}},date: [new Date(1536627600000), new Date(1540047600000)],reg: new RegExp('\\w+'),num: [NaN, Infinity, -Infinity],person: Jack,};//深克隆函数function deepClone(obj) {if (obj === null) return null;if (typeof obj !== 'object') return obj;if (obj.constructor === Date) return new Date(obj);if (obj.constructor === RegExp) return new RegExp(obj);const newObj = new obj.constructor ();  //保持继承链for (let key in obj) {if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性const val = obj[key];newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合。}}return newObj;}//判断代码const obj2 = deepClone(obj);console.log(obj);console.log(obj2);obj.c.e.f = 1000;obj2.c.e.g.h = 2000;console.log(obj.c.e.f, obj2.c.e.f);console.log( obj.c.e.g.h, obj2.c.e.g.h);
复制代码

运行结果：

相对于上一个完美解决方法，该方法的实现可圈可点，代码量更少，同样是达到了各种数据类型深克隆的实现，选择哪种方法都是没问题的，看个人喜好罢了。

以上是个人参考众家之言后总结的深克隆方法，如有不正确之处，请各方大家多多指点，谢谢！