上一篇深度克隆我们简单实现了深度克隆。也大致明白了深度克隆的原理。
但是仍有很多不足与不完善的地方，在此感谢前端艾希同学提供的以下几点需要完善与优化的地方：
- 缺少
symbol对象的clone处理 - 对象属性引用该对象，即对象的循环引用
- 一些比较特殊的对象，如
Date、RegExp等 -
for...in不可遍历不可枚举的属性（symbol）
由于要面对不同的对象(正则、数组、Date等)要采用不同的处理方式，我们需要实现一个对象类型判断函数。
const getType = (obj)=> {
//定义map容器，存放解析后的数据类型，这样可以根据需求很方便地进行扩展
var map = {
'[object Boolean]' : 'boolean',
'[object Number]' : 'number',
'[object String]' : 'string',
'[object Function]' : 'function',
'[object Array]' : 'array',
'[object Date]' : 'date',
'[object RegExp]' : 'regExp',
'[object Undefined]': 'undefined',
'[object Null]' : 'null',
'[object Object]' : 'object',
'[object Symbol]' : 'symbol'
//新增数据类型...
};
if(obj instanceof Element) {
return 'element';
}
return map[Object.prototype.toString.call(obj)];
}
我们需要通过正则的扩展了解到flags属性等等,因此我们需要实现一个提取flags的函数.
const getRegExp = re => {
var flags = '';
if (re.global) flags += 'g';
if (re.ignoreCase) flags += 'i';
if (re.multiline) flags += 'm';
return flags;
};
我们有了这些函数准备后，可以来实现一个比较常用的，能满足大多数情况的深度克隆函数，代码如下：
const deepClone = sourceObj => {
// 维护两个储存循环引用的数组
const sourceObjArr = [];
const targetObjArr = [];
const clone = sourceObj => {
let targetObj, proto;
const type = getType(sourceObj);
//判断数据类型
switch(type){
case 'boolean':
case 'number':
case 'string':
case 'null':
case 'undefined':
case 'function'||'object':{
return sourceObj;
break;
}
case 'symbol':{
return Symbol(Symbol.keyFor(sourceObj).toString());
break;
}
case 'array':{
targetObj = [];
break;
}
case 'regExp':{
targetObj = new RegExp(sourceObj.source, getRegExp(sourceObj));
if (sourceObj.lastIndex) targetObj.lastIndex = sourceObj.lastIndex;
break;
}
case 'date':{
targetObj = new Date(sourceObj.getTime());
break;
}
default:{
//处理对象原型
//ES2017 引入了Object.getOwnPropertyDescriptors方法，返回指定对象所有自身属性（非继承属性）的描述对象
proto = Object.getPrototypeOf(sourceObj) || Object.getOwnPropertyDescriptors(sourceObj);
// 利用Object.create切断原型链
targetObj = Object.create(proto);
break;
}
}
// 处理循环引用
const index = sourceObjArr.indexOf(sourceObj);
if (index != -1) {// 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
return targetObjArr[index];
}
sourceObjArr.push(sourceObj);
targetObjArr.push(targetObj);
for (let i in sourceObj) {// 递归
targetObj[i] = clone(sourceObj[i]);
}
return targetObj;
};
return clone(sourceObj);
}
这样，我们就简单实现了深度克隆。
我们来测试下：
function person(pname) {
this.name = pname;
}
const Messi = new person('Messi');
function say() {
console.log('hi');
};
let symbol = {
[Symbol()]: 123
}
const sourceObj = {
a: say,
b: new Array(1),
c: new RegExp('ab+c', 'i'),
d: Messi,
e: symbol
};
const targetObj = deepClone(sourceObj);
console.log(targetObj.a, sourceObj.a); //[Function: say] [Function: say]
console.log(targetObj.b[0], sourceObj.b[0]); // undefined undefined
console.log(targetObj.c, sourceObj.c); // /ab+c/i /ab+c/i
console.log(targetObj.d.constructor, sourceObj.d.constructor); // [Function: person][Function: person]
console.log(targetObj.e,sourceObj.e);
当然,我们这个深克隆还不算完美,例如Buffer对象、Promise、Set、Map可能都需要我们做特殊处理。
ES6:
Map、Set、WeakMap、WeakSet、ArrayBuffer对象、TypedArray视图和DataView视图、Float32Array、Float64Array、Int8Array...
总之，JS中的数据类型是非常复杂的，要想完全实现一个完美的深度克隆，笔者力有不逮。一般在企业开发中，都是根据具体需求来实现一个深度克隆，用的最多的是JOSN方式：
let obj2 = JSON.parse(JSON.stringify(obj))
因为它虽然有缺陷，但是足够精简。如果我们确实需要copy各种复杂数据类型的话，这里笔者建议可以用lodash的深克隆实现。
下节我们再一起了解下immer取代深克隆的原理与方法。
参考链接：
https://juejin.im/post/5abb55ee6fb9a028e33b7e0a
https://github.com/Alvin-Liu/Blog/issues/9
https://juejin.im/post/5ae19b07518825673123ea25
