ES6 Object.assign()的用法（ 浅层深拷贝）_defaultopt

最近也一直会用JavaScript，然后中间使用的一些组件，如Echarts 会有非常复杂的配置文件，而大部分配置可能都是一样的，所以想着写一份通用配置，然后，其他地方需要使用的时候，用这份配置深拷贝一份配置，然后在上面继续改。就如下：

1. const defaultOpt = {

2. key1: xxx,

3. key2: {

4. dd: ee

5. },

6. .....

7. };

8.  

9. // deepCopy为某个实现深拷贝的方法

10. const opt1 = deepCopy(defaultOpt);

11. opt1.....

12. const opt2 = deepCopy(defaultOpt);

13. opt2.....

深拷贝和浅拷贝

这里也涉及到一个深拷贝和浅拷贝的概念。javascript中存储对象都是存地址的，所以浅拷贝是都指向同一块内存区块，而深拷贝则是另外开辟了一块区域。下面实例也可以看出这一点：

1. // 浅拷贝

2. const a = {t: 1, p: 'gg'};

3. const b = a;

4. b.t = 3;

5. console.log(a); // {t: 3, p: 'gg'}

6. console.log(b); // {t: 3, p: 'gg'}

7.  

8. //深拷贝

9. const c = {t: 1, p: 'gg'};

10. const d = deepCopy(c);

11. d.t = 3;

12. console.log(c); // {t: 1, p: 'gg'}

13. console.log(d); // {t: 3, p: 'gg'}

可以明显看出，浅拷贝在改变其中一个值时，会导致其他也一起改变，而深拷贝不会。

Object.assign()

我需要的是深拷贝的方法，然后发现原来es6 中有Object.assign() 这个方法，感觉可以拿来用了。 
贴一下两个官方例子：

1. // Cloning an object

2. var obj = { a: 1 };

3. var copy = Object.assign({}, obj);

4. console.log(copy); // { a: 1 }

1. // Merging objects

2. var o1 = { a: 1 };

3. var o2 = { b: 2 };

4. var o3 = { c: 3 };

5.  

6. var obj = Object.assign(o1, o2, o3);

7. console.log(obj); // { a: 1, b: 2, c: 3 }

8. console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.

是不是很完美，又可以clone又可以merge。在我这种情况下，我觉得我的代码量又可以减少了，比如：

1. const defaultOpt = {

2. title: 'hello',

3. name: 'oo',

4. type: 'line'

5. };

6. // 原来可能需要这样

7. const opt1 = deepCopy(a);

8. opt1.title = 'opt1';

9. opt1.type = 'bar';

10. opt1.extra = 'extra'; // 额外增加配置

11. // 现在只要这样

12. const opt2 = Object.assign({}, a, {

13. title: 'opt2',

14. type: 'bar',

15. extra: 'extra'

16. });

不过，很快，问题出现了，那就是

merge和我想象的不一样

且看例子：

1. const defaultOpt = {

2. title: {

3. text: 'hello world',

4. subtext: 'It\'s my world.'

5. }

6. };

7.  

8. const opt = Object.assign({}, defaultOpt, {

9. title: {

10. subtext: 'Yes, your world.'

11. }

12. });

13.  

14. console.log(opt);

15.  

16. // 预期结果

17. {

18. title: {

19. text: 'hello world',

20. subtext: 'Yes, your world.'

21. }

22. }

23. // 实际结果

24. {

25. title: {

26. subtext: 'Yes, your world.'

27. }

28. }

原本想的是它只会覆盖subtext ，然而其实它直接覆盖了整个title ，这个让我比较郁闷，相当于它只merge根属性，下面的就不做处理了。 
代码只能重构成相对麻烦一点的：

1. const defaultOpt = {

2. title: {

3. text: 'hello world',

4. subtext: 'It\'s my world.'

5. }

6. };

7.  

8. const opt = Object.assign({}, defaultOpt);

9. opt.title.subtext = 'Yes, your world.';

10.  

11. console.log(opt);

12. // 结果正常

13. {

14. title: {

15. text: 'hello world',

16. subtext: 'Yes, your world.'

17. }

18. }

这样用虽然麻烦一点，但是也还好，可以用了。不过。。。很快，又出现问题了，如下：

1. const defaultOpt = {

2. title: {

3. text: 'hello world',

4. subtext: 'It\'s my world.'

5. }

6. };

7.  

8. const opt1 = Object.assign({}, defaultOpt);

9. const opt2 = Object.assign({}, defaultOpt);

10. opt2.title.subtext = 'Yes, your world.';

11.  

12. console.log('opt1:');

13. console.log(opt1);

14. console.log('opt2:');

15. console.log(opt2);

16.  

17. // 结果

18. opt1:

19. {

20. title: {

21. text: 'hello world',

22. subtext: 'Yes, your world.'

23. }

24. }

25. opt2:

26. {

27. title: {

28. text: 'hello world',

29. subtext: 'Yes, your world.'

30. }

31. }

上面结果发现两个配置变得一模一样，而其实我们并没有去更改opt1 的subtext ，只是改了opt2 的。 
这说明一点：在title 这一层只是简单的浅拷贝 ，而没有继续深入的深拷贝。 
这里不经让我怀疑这个接口到底是怎么实现的，它到底是不是和我所想的一样。 
翻了一下官方文档，发现它写得一个Polyfill ，代码我加了点注释如下：

1. if (!Object.assign) {

2. // 定义assign方法

3. Object.defineProperty(Object, 'assign', {

4. enumerable: false,

5. configurable: true,

6. writable: true,

7. value: function(target) { // assign方法的第一个参数

8. 'use strict';

9. // 第一个参数为空，则抛错

10. if (target === undefined || target === null) {

11. throw new TypeError('Cannot convert first argument to object');

12. }

13.  

14. var to = Object(target);

15. // 遍历剩余所有参数

16. for (var i = 1; i < arguments.length; i++) {

17. var nextSource = arguments[i];

18. // 参数为空，则跳过，继续下一个

19. if (nextSource === undefined || nextSource === null) {

20. continue;

21. }

22. nextSource = Object(nextSource);

23.  

24. // 获取改参数的所有key值，并遍历

25. var keysArray = Object.keys(nextSource);

26. for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {

27. var nextKey = keysArray[nextIndex];

28. var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);

29. // 如果不为空且可枚举，则直接浅拷贝赋值

30. if (desc !== undefined && desc.enumerable) {

31. to[nextKey] = nextSource[nextKey];

32. }

33. }

34. }

35. return to;

36. }

37. });

38. }

上面的代码可以直接说明它只对顶层属性做了赋值，完全没有继续做递归之类的把所有下一层的属性做深拷贝。

总结

Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。用的时候，还是要注意这个问题的。

附

发现一个可以简单实现深拷贝的方法，当然，有一定限制，如下：

const obj1 = JSON.parse(JSON.stringify(obj));

• 是将一个对象转成json字符串，然后又将字符串转回对象。