版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/waiterwaiter/article/details/50267787
最近也一直会用javascript，然后中间使用的一些组件，如Echarts 会有非常复杂的配置文件，而大部分配置可能都是一样的，所以想着写一份通用配置，然后，其他地方需要使用的时候，用这份配置深拷贝一份配置，然后在上面继续改。就如下：
const defaultOpt = {
key1: xxx,
key2: {
dd: ee
},
.....
}; const opt1 = deepCopy(defaultOpt);
opt1..... const opt2 = deepCopy(defaultOpt);
opt2.....
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
深拷贝和浅拷贝
这里也涉及到一个深拷贝和浅拷贝的概念。javascript中存储对象都是存地址的，所以浅拷贝是都指向同一块内存区块，而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点：
const a = {t: 1, p: 'gg'}; const b = a;
b.t = 3;
console.log(a); console.log(b); const c = {t: 1, p: 'gg'}; const d = deepCopy(c);
d.t = 3;
console.log(c); console.log(d);
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
可以明显看出，浅拷贝在改变其中一个值时，会导致其他也一起改变，而深拷贝不会。
Object.assign()
我需要的是深拷贝的方法，然后发现原来es6 中有Object.assign() 这个方法，感觉可以拿来用了。
贴一下两个官方例子：
var obj = ; var copy = Object.assign(, obj);
console.log(copy);
var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3);
console.log(obj); console.log(o1);
是不是很完美，又可以clone又可以merge。在我这种情况下，我觉得我的代码量又可以减少了，比如：
const defaultOpt = {
title: 'hello',
name: 'oo', type: 'line' }; const opt1 = deepCopy(a);
opt1.title = 'opt1';
opt1.type = 'bar';
opt1.extra = 'extra'; const opt2 = Object.assign({}, a, {
title: 'opt2', type: 'bar',
extra: 'extra' });
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
不过，很快，问题出现了，那就是
merge和我想象的不一样
且看例子：
const defaultOpt = {
title: {
text: 'hello world',
subtext: 'It\'s my world.' }
}; const opt = Object.assign({}, defaultOpt, {
title: {
subtext: 'Yes, your world.' }
});
console.log(opt); {
title: {
text: 'hello world',
subtext: 'Yes, your world.' }
} {
title: {
subtext: 'Yes, your world.' }
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
原本想的是它只会覆盖subtext ，然而其实它直接覆盖了整个title ，这个让我比较郁闷，相当于它只merge根属性，下面的就不做处理了。
代码只能重构成相对麻烦一点的：
const defaultOpt = {
title: {
text: 'hello world',
subtext: 'It\'s my world.' }
}; const opt = Object.assign({}, defaultOpt);
opt.title.subtext = 'Yes, your world.';
console.log(opt); {
title: {
text: 'hello world',
subtext: 'Yes, your world.' }
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
这样用虽然麻烦一点，但是也还好，可以用了。不过。。。很快，又出现问题了，如下：
const defaultOpt = {
title: {
text: 'hello world',
subtext: 'It\'s my world.' }
}; const opt1 = Object.assign({}, defaultOpt); const opt2 = Object.assign({}, defaultOpt);
opt2.title.subtext = 'Yes, your world.';
console.log('opt1:');
console.log(opt1);
console.log('opt2:');
console.log(opt2); opt1:
{
title: {
text: 'hello world',
subtext: 'Yes, your world.' }
}
opt2:
{
title: {
text: 'hello world',
subtext: 'Yes, your world.' }
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
上面结果发现两个配置变得一模一样，而其实我们并没有去更改opt1 的subtext ，只是改了opt2 的。
这说明一点：在title 这一层只是简单的浅拷贝 ，而没有继续深入的深拷贝。
这里不经让我怀疑这个接口到底是怎么实现的，它到底是不是和我所想的一样。
翻了一下官方文档，发现它写得一个Polyfill ，代码我加了点注释如下：
if (!Object.assign) { Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) { 'use strict'; if (target === undefined || target === null) { throw new TypeError('Cannot convert first argument to object');
} var to = Object(target); for (var i = 1; i < arguments.length; i++) { var nextSource = arguments[i]; if (nextSource === undefined || nextSource === null) { continue;
}
nextSource = Object(nextSource); var keysArray = Object.keys(nextSource); for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) { var nextKey = keysArray[nextIndex]; var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
} return to;
}
});
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
上面的代码可以直接说明它只对顶层属性做了赋值，完全没有继续做递归之类的把所有下一层的属性做深拷贝。
总结
Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。用的时候，还是要注意这个问题的。
附
发现一个可以简单实现深拷贝的方法，当然，有一定限制，如下：
const obj1 = JSON.parse(JSON.stringify(obj));
思路就是将一个对象转成json字符串，然后又将字符串转回对象。
