一直想梳理下工作中经常会用到的深拷贝的内容，然而遍览了许多的文章，却发现对深拷贝并没有一个通用的完美实现方式。因为对深拷贝的定义不同，实现时的edge case过多，在深拷贝的时候会出现循环引用等问题，导致JS内部并没有实现深拷贝，但是我们可以来探究一下深拷贝到底有多复杂，各种实现方式的优缺点，同时参考下常用库对其的实现。
引用类型
之所以会出现深浅拷贝的问题，实质上是由于JS对基本类型和引用类型的处理不同。基本类型指的是简单的数据段，而引用类型指的是一个对象，而JS不允许我们直接操作内存中的地址，也是不能操作对象的内存空间，所以，我们对对象的操作都只是在操作它的引用而已。
在复制时也是一样，如果我们复制一个基本类型的值时，会创建一个新值，并把它保存在新的变量的位置上。而如果我们复制一个引用类型时，同样会把变量中的值复制一份放到新的变量空间里，但此时复制的东西并不是对象本身，而是指向该对象的指针。所以我们复制引用类型后，两个变量其实指向同一个对象，改变其中一个对象，会影响到另外一个。
var num = 10;
var obj = {
name: ‘Nicholas’
}
var num2 = num;
var obj2 = obj;
obj.name = ‘Lee’;
obj2.name; // ‘Lee’
浅拷贝
如果我们要复制对象的所有属性都不是引用类型时，可以使用浅拷贝，实现方式是遍历并复制，后返回新的对象。
function shallowCopy(obj) {
var copy = {};
// 只复制可遍历的属性
for (key in obj) {
// 只复制本身拥有的属性
if (obj.hasOwnProperty(key)) {
copy[key] = obj[key];
}
}
return copy;
}
如上面所说，我们使用浅拷贝会复制所有引用对象的指针，而不是具体的值，所以使用时一定要明确自己的需求，同时，浅拷贝的实现也是简单的。
JS内部实现了浅拷贝，如Object.assign()，其中个参数是我们终复制的目标对象，后面的所有参数是我们的即将复制的源对象，支持对象或数组，一般调用的方式为
var newObj = Object.assign({}, originObj);
深拷贝
如果我们需要复制一个拥有所有属性和方法的新对象，要用到深拷贝，JS并没有内置深拷贝方法，主要是因为：
- 深拷贝怎么定义？我们怎么处理原型？怎么区分可拷贝的对象？原生DOM/BOM对象怎么拷贝？函数是新建还是引用？这些edge case太多导致我们无法统一概念，造出大家都满意的深拷贝方法来。
- 内部循环引用怎么处理，是不是保存每个遍历过的对象列表，每次进行对比，然后再造一个循环引用来？这样带来的性能消耗可以接受吗。
解释一些常见的问题概念，防止有些同学不明白我们在讲什么。比如循环引用：
var obj = {};
obj.b = obj;
这样当我们深拷贝obj对象时，会循环的遍历b属性，直到栈溢出。 我们的解决方案为建立一个[]，每次遍历对象进行比较，如果[]中已存在，则证明出现了循环引用或者相同引用，我们直接返回该对象已复制的引用即可：
let hasObj = [];
function referCopy(obj) {
let copy = {};
hasObj.push(obj);
for (let i in obj) {
if (typeof obj[i] === ‘object’) {
let index = hasObj.indexOf(obj[i]);
if (index > -1) {
console.log(‘存在循环引用或属性引用了相同对象’);
// 如果已存在，证明引用了相同对象，那么无论是循环引用还是重复引用，我们返回引用可以了
copy[i] = hasObj[index];
} else {
copy[i] = referCopy(obj[i]);
}
} else {
copy[i] = obj[i];
}
}
return copy;
}
处理原型和区分可拷贝的对象：我们一般使用function.prototype指代原型，使用obj.__proto__指代原型链，使用enumerable属性表示是否可以被for ... in等遍历，使用hasOwnProperty来查询是否是本身元素。在原型链和可遍历属性和自身属性之间存在交集，但都不相等，我们应该如何判断哪些属性应该被复制呢？
函数的处理：函数拥有一些内在属性，但我们一般不修改这些属性，所以函数一般直接引用其地址即可。但是拥有一些存取器属性的函数我们怎么处理？是复制值还是复制存取描述符？
var obj = {
age: 10,
get age() {
return this.age;
},
set age(age) {
this.age = age;
}
};
var obj2 = $.extend(true, {}, obj);
obj2; // {age: 10}
这个是我们想要的结果吗？大部分场景下不是吧，比如我要复制一个已有的Vue对象。当然我们也有解决方案：
function copy(obj) {
var copy = {};
for (var i in obj) {
let desc = Object.getOwnPropertyDescriptor(obj, i);
// 检测是否为存取描述符
if (desc.set || desc.get) {
Object.defineProperty(copy, i, {
get: desc.get,
set: desc.set,
configuarable: desc.configuarable,
enumerable: true
});
// 否则为数据描述符，则复用下面的深拷贝方法，此处简写
} else {
copy[i] = obj[i];
}
}
return copy;
}
虽然边界条件很多，但是不同的框架和库都对该方法进行了实现，只不过定义不同，实现方式也不同，如jQuery.extend()只复制可枚举的属性，不继承原型链，函数复制引用，内部循环引用不处理。而lodash实现的更为，它实现了结构化克隆算法。 该算法的优点是：
- 可以复制 RegExp 对象。
- 可以复制 Blob、File 以及 FileList 对象。
- 可以复制 ImageData 对象。CanvasPixelArray 的克隆粒度将会跟原始对象相同，并且复制出来相同的像素数据。
- 可以正确的复制有循环引用的对象
依然存在的缺陷是：
- Error 以及 Function 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 DATA_CLONE_ERR 的异常。
- 企图去克隆 DOM 节点同样会抛出 DATA_CLONE_ERROR 异常。
- 对象的某些特定参数也不会被保留
- RegExp 对象的 lastIndex 字段不会被保留
- 属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下。
- 原形链上的属性也不会被追踪以及复制。
我们先来看看常规的深拷贝，它跟浅拷贝的区别在于，当我们发现对象的属性是引用类型时，进行递归遍历复制，直到遍历完所有属性：
var deepClone = function(currobj){
if(typeof currobj !== ‘object’){
return currobj;
}
if(currobj instanceof Array){
var newobj = [];
}else{
var newobj = {}
}
for(var key in currobj){
if(typeof currobj[key] !== ‘object’){
// 不是引用类型，则复制值
newobj[key] = currobj[key];
}else{
// 引用类型，则递归遍历复制对象
newobj[key] = deepClone(currobj[key])
}
}
return newobj
}
这个的主要问题是不处理循环引用，不处理对象原型，函数依然是引用类型。上面描述过的复杂问题依然存在，可以说是简陋但是日常工作够用的深拷贝方式。
另外还有一种方式是使用JSON序列化，巧妙但是限制更多：
// 调用JSON内置方法先序列化为字符串再解析还原成对象
newObj = JSON.parse(JSON.stringify(obj));
JSON是一种表示结构化数据的格式，只支持简单值、对象和数组三种类型，不支持变量、函数或对象实例。所以我们工作中可以使用它解决常见问题，但也要注意其短板：函数会丢失，原型链会丢失，以及上面说到的所有缺陷。
库实现
上面的两种方式可以满足大部分场景的需求，如果有更复杂的需求，可以自己实现。现在我们可以看一些框架和库的解决方案，下面拿经典的jQuery和lodash的源码看下，它们的优缺点上面都说过了：
jQuery.extend()
// 进行深度复制，如果个参数为true则深度复制，如果目标对象不合法，则抛弃并重构为{}空对象，如果只有一个参数则功能为扩展jQuery对象
jQuery.extend = jQuery.fn.extend = function() {
var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {},
i = 1,
length = arguments.length,
deep = false;
// Handle a deep copy situation
// 个参数可以为true来确定进行深度复制
if ( typeof target === “boolean” ) {
deep = target;
// Skip the boolean and the target
target = arguments[ i ] || {};
i++;
}
// Handle case when target is a string or something (possible in deep copy)
// 如果目标对象不合法，则强行重构为{}空对象，抛弃原有的
if ( typeof target !== “object” && !jQuery.isFunction( target ) ) {
target = {};
}
// Extend jQuery itself if only one argument is passed
// 如果只有一个参数，扩展jQuery对象
if ( i === length ) {
target = this;
i–;
}
for ( ; i < length; i++ ) {
// Only deal with non-null/undefined values
// 只处理有值的对象
if ( ( options = arguments[ i ] ) != null ) {
// Extend the base object
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
// Prevent never-ending loop
// 阻止简单形式的循环引用
// var obj={}, obj2={a:obj}; $.extend(true, obj, obj2); 会形成复制的对象循环引用obj
if ( target === copy ) {
continue;
}
// 如果为深度复制，则新建[]和{}空数组或空对象，递归本函数进行复制
// Recurse if we’re merging plain objects or arrays
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.isArray( src ) ? src : [];
} else {
clone = src && jQuery.isPlainObject( src ) ? src : {};
}
// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );
// Don’t bring in undefined values
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// Return the modified object
return target;
};
lodash _.baseClone()
/**
* The base implementation of `_.clone` and `_.cloneDeep` which tracks
* traversed objects.
*
* @private
* @param {*} value The value to clone.
* @param {boolean} bitmask The bitmask flags.
* 1 – Deep clone
* 2 – Flatten inherited properties
* 4 – Clone symbols
* @param {Function} [customizer] The function to customize cloning.
* @param {string} [key] The key of `value`.
* @param {Object} [object] The parent object of `value`.
* @param {Object} [stack] Tracks traversed objects and their clone counterparts.
* @returns {*} Returns the cloned value.
*/
function baseClone(value, bitmask, customizer, key, object, stack) {
var result,
isDeep = bitmask & CLONE_DEEP_FLAG,
isFlat = bitmask & CLONE_FLAT_FLAG,
isFull = bitmask & CLONE_SYMBOLS_FLAG;
if (customizer) {
result = object ? customizer(value, key, object, stack) : customizer(value);
}
if (result !== undefined) {
return result;
}
if (!isObject(value)) {
return value;
}
var isArr = isArray(value);
if (isArr) {
result = initCloneArray(value);
if (!isDeep) {
return copyArray(value, result);
}
} else {
var tag = getTag(value),
isFunc = tag == funcTag || tag == genTag;
if (iuffer(value)) {
return cloneBuffer(value, isDeep);
}
if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
result = (isFlat || isFunc) ? {} : initCloneObject(value);
if (!isDeep) {
return isFlat
? copySymbolsIn(value, baseAssignIn(result, value))
: copySymbols(value, baseAssign(result, value));
}
} else {
if (!cloneableTags[tag]) {
return object ? value : {};
}
result = initCloneByTag(value, tag, baseClone, isDeep);
}
}
// Check for circular references and return its corresponding clone.
stack || (stack = new Stack);
var stacked = stack.get(value);
if (stacked) {
return stacked;
}
stack.set(value, result);
var keysFunc = isFull
? (isFlat ? getAllKeysIn : getAllKeys)
: (isFlat ? keysIn : keys);
var props = isArr ? undefined : keysFunc(value);
arrayEach(props || value, function(subValue, key) {
if (props) {
key = subValue;
subValue = value[key];
}
// Recursively populate clone (susceptible to call stack limits).
assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack));
});
return result;
}
参考资料
- 知乎 JS的深拷贝和浅拷贝： https://www.zhihu.com/questio…
- Javascript之深拷贝： https://aepkill.github.io/201…
- js对象克隆之谜：http://b-sirius.me/2017/08/26…
- 知乎 JS如何完整实现深度Clone对象：https://www.zhihu.com/questio…
- github lodash源码：https://github.com/lodash/lod…
- MDN 结构化克隆算法：https://developer.mozilla.org…
- jQuery v3.2.1 源码
- JavaScript程序设计 第4章（变量、作用域和内存问题）、第20章（JSON）
© 版权声明
文章全是本幻城写的，尽量别直接复制粘贴
THE END
暂无评论内容