前端战五渣学JavaScript——深克隆（深拷贝）
直接进入正题
JavaScript数据类型
5种简单数据类型（也称为基本数据类型）:Undefined、Null、Boolean、Number和String；
1种复杂数据类型：Object；
基本数据类型（5种简单数据类型）：直接存储在栈（stack）中的数据
引用类型（复杂数据类型Object）：存储的是该对象在栈中引用，真实的数据存放在堆内存里
浅克隆
基础数据类型
（我个人觉得。。。基础数据类型没有什么深克隆浅克隆之分，暂且目录先这么分吧）
因为数据类型的特性，在赋值的时候，基本数据类型和引用类型是不一样的⬇️
// 基本数据类型
var a = '我是变量a的值';
var b = a;
console.log(a); // 我是变量a的值
console.log(b); // 我是变量a的值
b = '我是变量b的值';
console.log(a); // 我是变量a的值
console.log(b); // 我是变量b的值
上面代码我们声明了变量a为我是变量a的值，然后声明变量b，并把变量a赋值给变量b，输出，得出变量a和b输出的值是一样的
然后我们单独更改了变量b的值，再输出的时候发现变量a和b输出的值不一样了，可以证明他们两个的值是单独存在的，互相没有联系，就算var b = a，也只是新增了一个变量b和值。
复杂数据类型（引用类型）
// 引用类型
var obj1 = {
a: 'a',
b: 'b'
}
var obj2 = obj1;
console.log(obj1); // { a: 'a', b: 'b' }
console.log(obj2); // { a: 'a', b: 'b' }
obj2.b = 'bb';
console.log(obj1); // { a: 'a', b: 'bb' }
console.log(obj2); // { a: 'a', b: 'bb' }
在上面的代码中能发现，在引用类型直接的赋值，声明变量obj1为一个对象，然后让讲变量obj1赋值给obj2，这时候输出的变量obj1和变量obj2的值是一样的
当我们更改了obj2.b的值以后，输出结果发现obj1.b的值也跟着发生了变化
这就是我们要说的，引用类型的赋值只是给了一个对内存中对象引用的一个指针，所以变量obj1和变量obj2是引用了同一个内存中的对象，所以当一个更改以后，另一个也会跟着改变。
插播深克隆的形象图片，我自己画的，大概意思理解一下
image
深克隆
我们要实现的深克隆，是一个完全克隆出一个全新的对象在内存中
不完美深克隆——Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。————————《MDN web docs》
Object.assign(target, ...sources)
这是MDN文档中对Object.assign()这个方法的说明，其实就是这个方法可以穿入两个参数，第一个参数是目标函数，第二个参数是源对象，然后会把源对象的可枚举到的属性复制到目标函数中，然后返回目标对象，也就是更改了目标对象。举个例子，先来了解一下这个方法怎么用⬇️
// 声明目标对象和源对象
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
// 将源对象上可枚举的属性复制到目标对象上，有相同键值的覆盖
const returnedTarget = Object.assign(target, source);
console.log(source); // { b: 4, c: 5 }
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
就目前的形势，真的是把源对象的属性复制到目标对象上了，貌似是可以实现深克隆的，那我们再来看下面的例子⬇️
// 声明目标对象和源对象
const target = {};
const source = {
a: 1,
b: {
ba: 'ba',
bb: 'bb'
},
c: function () {
console.log('c')
}
};
// 将源对象上可枚举的属性复制到目标对象上，有相同键值的覆盖
const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(returnedTarget); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
target.b.ba = 'ba2';
console.log(target); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
console.log(source); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
console.log(returnedTarget); // { a: 1, b: { ba: 'ba2', bb: 'bb' }, c: [Function: c] }
上面的代码想表达的意思就是，当我们不涉及到第二层或者更深层的包含复杂数据类型，可见Object.assign()方法是基本可行的，但是如果对象中包含另一层Object或者Array这样的引用类型，他们还是保存的指针，而不是真的复制出一个新的Object或者Array
既然Object.assign()不是很完美，那我们换个方法————序列化
不完美深克隆——JSON.stringify()和JSON.parse()
序列化（Serialization）意味着将对象或某种其他类型的数据结构转换为可存储格式（例如，文件或者buffer）
在JavaScript中，你可以通过调用JSON.stringify()函数将某个值序列化为JSON格式的字符串。
CSS值可以通过调用CSSStyleDeclaration.getPropertyValue()函数来序列化。
————————————《MDN web docs》
我们现在说说一个最简单的伪深克隆（不是官方词语），可以达到大部分功能，但是依然会有欠缺，这就是通过JSON.stringify()和JSON.parse()方法对对象进行序列化和反序列化。依然是上面的例子⬇️
// 声明源对象
let source = {
a: 1,
b: {
ba: 'ba',
bb: 'bb'
},
c: function () {
console.log('c')
}
};
// 通过序列化然后再反序列化源对象来赋值目标对象
let target = JSON.parse(JSON.stringify(source))
console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(target); // { a: 1, b: { ba: 'ba', bb: 'bb' } }
target.b.ba = 'ba2';
console.log(source); // { a: 1, b: { ba: 'ba', bb: 'bb' }, c: [Function: c] }
console.log(target); // { a: 1, b: { ba: 'ba2', bb: 'bb' } }
上面通过序列化和反序列化的方法克隆了源对象到目标对象，不仅第一层属性一样，第二层的对象也不仅仅是指向同一个对象，这看似完美的方法却有几点缺陷
- 他无法实现对函数 、RegExp等特殊对象的克隆
- 会抛弃对象的constructor,所有的构造函数会指向Object
- 对象有循环引用,会报错
以下例子借鉴《面试官:请你实现一个深克隆》
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 构造函数
function person(pname) {
this.name = pname;
}
const Messi = new person('Messi');
// 函数
function say() {
console.log('hi');
};
const oldObj = {
a: say,
b: new Array(1),
c: new RegExp('ab+c', 'i'),
d: Messi
};
const newObj = JSON.parse(JSON.stringify(oldObj));
// 无法复制函数
console.log(newObj.a, oldObj.a); // undefined [Function: say]
// 稀疏数组复制错误
console.log(newObj.b[0], oldObj.b[0]); // null undefined
// 无法复制正则对象
console.log(newObj.c, oldObj.c); // {} /ab+c/i
// 构造函数指向错误
console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]
我们可以看到在对函数、正则对象、稀疏数组等对象克隆时会发生意外，构造函数指向也会发生错误。
const oldObj = {};
oldObj.a = oldObj;
const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON
对象的循环引用会抛出错误.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
实现深克隆（代码有问题，仅供参考思路）
看来我们想通过已有的方法是实现不了深克隆的，所以我们需要自己手写方法来实现深克隆，我们要记住的思路就是两点
- 判断数据类型，分别处理
- 递归
/**
* 常量
* @type {string}
*/
const TYPE_OBJECT = '[object Object]';
const TYPE_ARRAY = '[object Array]';
/**
* 判断对象的类型
* @param obj 来源对象
* @returns {string} 对象类型
*/
function typeToString(obj) {
return Object.prototype.toString.call(obj)
}
/**
* 深克隆对象
* @param oldObj 源对象
* @returns {Object} 返回克隆后的对象
*/
function deepClone(oldObj) {
let newObj;
if ( oldObj === null ) {
return null
}
if ( typeof oldObj !== 'object') {
return oldObj
}
switch (typeToString(oldObj)) {
case TYPE_OBJECT:
newObj = {}
break;
case TYPE_ARRAY:
newObj = [];
break;
}
for (let i in oldObj) {
newObj[i] = deepClone(oldObj[i]);
}
return newObj
}
以上是我自己手写实现的深克隆
请勿抄袭，写的只是个小demo，不能用在生产环境，判断的数据类型有限，并且没有处理对象继承的constructor指向问题，也没有解决循环引用的问题
看一下大概思路就行了
最佳实践————Lodash的_.cloneDeep
Lodash是什么？Lodash是一个一致性、模块化、高性能的JavaScript实用工具库，实用方法请参考我的另一篇博客
掘金：《lodash入门》 简书：《lodash入门》
还有还有😝😝😝😝😝😝
image
阅读量上万了，开心~
使用
import _ from 'lodash';
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
使用就是这么使用，看了眼源码是怎么实现，可以说lodash在深克隆方法的实现上真是全之又全，判断的项目测20来项，不仅有数据类型的判断，还有浮点数的判断，多少位的浮点数的判断，反正就是很多判断，以及边界考虑。
OH MY GOD，用它！！
PS：这篇没有加入动漫元素😢😢😢
我是前端战五渣，一个前端界的小学生。
