小悟：Object.assign() “深拷贝”

迈不过友情╰ 2022-06-09 12:29 224阅读 0赞

### 深拷贝&浅拷贝 ###

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

>     // 浅拷贝
>     const a = {t: 1, p: 'gg'};
>     const b = a;
>     b.t = 3;
>     console.log(a); // {t: 3, p: 'gg'}
>     
>     //深拷贝
>     const c = {t: 1, p: 'gg'};
>     const d = deepCopy(c);
>     d.t = 3;
>     console.log(c); // {t: 1, p: 'gg'}
>     console.log(d); // {t: 3, p: 'gg'}

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

### Object.assign() ###

es6 中的Object.assign() 方法，贴两个官方例子：

>     // Cloning an object
>     var obj = { a: 1 };
>     
>     // Merging objects
>     var o1 = { a: 1 };
>     var o2 = { b: 2 };
>     var o3 = { c: 3 };
>     
>     var obj = Object.assign(o1, o2, o3);
>     console.log(obj); // { a: 1, b: 2, c: 3 }
>     console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

是不是很完美，又可以clone又可以merge

### 问题的转折点 ###

1.仅仅merge根属性

很明显其实它直接覆盖了整个title，而不是覆盖subtext

2.除了根属性是深拷贝，其余都是浅拷贝

上面结果发现两个配置变得一模一样，而其实我们并没有去更改opt1 的subtext ，只是改了opt2 的。  
这说明一点：在title 这一层只是简单的浅拷贝 ，而没有继续深入的深拷贝。

### 源码实现 ###

翻了一下官方文档，发现它写得一个Polyfill ，代码我加了点注释如下：

if (!Object.assign) {
        // 定义assign方法
      Object.defineProperty(Object, 'assign', {
        enumerable: false,
        configurable: true,
        writable: true,
        value: function(target) {  // assign方法的第一个参数
     '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);
    
            // 获取改参数的所有key值，并遍历
            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;
        }
      });
    }

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

### 总： ###

Object.assign() 只是一级属性复制，比浅拷贝多深拷贝了一层而已。  
发现一个可以简单实现深拷贝的方法，当然，有一定限制，如下：

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

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