浅析 JavaScript 中的深拷贝

深藏阁楼爱情的钟 2022-05-15 07:51 173阅读 0赞

js 中的深浅拷贝是一个非常重要的知识点，因为在开发过程经常会遇到问题，特别是深拷贝。

至于什么是浅拷贝，什么是深拷贝这里不做解释，此外数组的浅拷贝可以使用 `slice()`、`concat()`函数，对象可以使用 `Object.assign()`，这里也不过多介绍，再开发真正会遇到的问题在于深拷贝，下面我会列出几个方法以及各自的缺陷吧。

> 深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。

### JSON.parse() 和 JSON.stringfy() 的运用 ###

> 举个例子

var obj1 = {
        member: ["Jack", "Rose", "Lucy"]
      }
      var obj2 = JSON.parse(JSON.stringify(obj1));
      obj2.member[0] = "Paul";
    
      console.log(obj1.member); // ['Jack', 'Rose', 'Lucy']
      console.log(obj2.member); // ['Paul', 'Rose', 'Lucy']

方法很方便，`JSON.parse(JSON.stringify(obj1))` 将对象转为 json string，再转为对象，如果不在意下面提到的问题，也可以用这种方法，效率还是不错的。

#### 问题1 丢失constructor ####

假如 obj1 由构造函数 `Foo()` 创建，那它的 `constructor` 也指向 `Foo()`，同时 `obj1 instanceof Foo` 也为 true。

然后通过 `var obj2 = JSON.parse(JSON.stringify(obj1));` 拷贝出来的 obj2 的 `constructor` 指向 `Object()`，当然 `obj2 instanceof Foo` 为 false。

#### 问题2 内容丢失\\改变 ####

看个例子：

// 一个比较全的测试用例，下面的方法也会用到这个例子
      function Foo() { 
        this.arr1 = [1, 2, 3];
        this.arr2 = [1, undefined, null, function() { }];
        this.obj1 = {a: 1, b: 2, c: 3};
        this.obj2 = {a: undefined, b: null, c: function() { }};
        this.unf = undefined;
        this.nul = null;
        this.func = function() { console.log("hello deepCopy")};
        this.date = new Date(0);
        this.reg = new RegExp('/^\w$/g');
        this.err = new Error('ERROR!!!');
      }

这是 `new Foo()` 的打印结果

![这里写图片描述][70]

这是 `JSON.parse(JSON.stringify(new Foo() ))` 的打印结果

![这里写图片描述][70 1]

直观点用个表格：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>new Foo()</th> 
   <th>JSON.parse(JSON.stringify(new Foo())</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>arr1</td> 
   <td><code>[1, 2, 3]</code></td> 
   <td><code>[1, 2, 3]</code></td> 
  </tr> 
  <tr> 
   <td>arr2</td> 
   <td><code>[1, undefined, null, f()]</code></td> 
   <td><code>[1, null, null, null]</code></td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) {}</td> 
   <td>“1970-01-01T00:00:00.000Z”</td> 
  </tr> 
  <tr> 
   <td>err</td> 
   <td>Error: ERROR!</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>func</td> 
   <td>f()</td> 
   <td>被忽略</td> 
  </tr> 
  <tr> 
   <td>obj1</td> 
   <td><code>{a: 1, b: 2, c: 3}</code></td> 
   <td><code>{a: 1, b: 2, c: 3}</code></td> 
  </tr> 
  <tr> 
   <td>obj2</td> 
   <td><code>{a: undefined, b: null, c: f()}</code></td> 
   <td><code>{b: null}</code></td> 
  </tr> 
  <tr> 
   <td>reg</td> 
   <td><code>/\/^w$\/g/</code></td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td><strong>proto</strong>.constructor</td> 
   <td>Foo()</td> 
   <td>Object()</td> 
  </tr> 
 </tbody> 
</table>

我们可以发现只有 `arr1、obj1` 的结果是正确的，其他数据均有不同程度的失真，其中尤其是 `arr2、obj2` 的改变，与 `JSON.stringify()` 的特性有关，此外我们也可以看到上一个说的点 `__proto__.constructor` 变为了 `Object()`。

关于`JSON.stringify()`在《你不知道的JavaScript》中卷中有提到：

所有安全的 JSON 值(JSON-safe)都可以使用 `JSON.stringify(..)` 字符串化。**安全的 JSON 值是指能够呈现为有效 JSON 格式的值。**

为了简单起见，我们来看看什么是不安全的 JSON 值。`undefined`、`function`、`symbol (ES6+)`和`包含循环引用`(对象之间相互引用，形成一个无限循环)的对象都不符合 JSON 结构标准，支持 JSON 的语言无法处理它们。

**JSON.stringify(..) 在对象中遇到 undefined、function 和 symbol 时会自动将其忽略，在数组中则会返回 null(以保证单元位置不变)。**

这种方法比较适合平常开发中使用，因为通常不需要考虑对象和数组之外的类型。

### 递归实现深拷贝 ###

直接列函数：

下面是递归实现对上面的测试用例的结果：  
![这里写图片描述][70 2]

继续表格

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>new Foo()</th> 
   <th>deepCopy(new Foo())</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>arr1</td> 
   <td><code>[1, 2, 3]</code></td> 
   <td><code>[1, 2, 3]</code></td> 
  </tr> 
  <tr> 
   <td><font>arr2</font></td> 
   <td><font><code>[1, undefined, null, f()]</code></font></td> 
   <td><font><code>[1, undefined, {}, f()]</code></font></td> 
  </tr> 
  <tr> 
   <td>date</td> 
   <td>Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)</td> 
   <td>Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)</td> 
  </tr> 
  <tr> 
   <td>err</td> 
   <td>Error: ERROR!</td> 
   <td>Error: ERROR!</td> 
  </tr> 
  <tr> 
   <td>func</td> 
   <td>f()</td> 
   <td>f()</td> 
  </tr> 
  <tr> 
   <td>obj1</td> 
   <td><code>{a: 1, b: 2, c: 3}</code></td> 
   <td><code>{a: 1, b: 2, c: 3}</code></td> 
  </tr> 
  <tr> 
   <td><font>obj2</font></td> 
   <td><font><code>{a: undefined, b: null, c: f()}</code></font></td> 
   <td><font><code>{a: undefined, b: {}, c: f()}</code></font></td> 
  </tr> 
  <tr> 
   <td>reg</td> 
   <td><code>/\/^w$\/g/</code></td> 
   <td><code>/\/^w$\/g/</code></td> 
  </tr> 
  <tr> 
   <td><strong>proto</strong>.constructor</td> 
   <td>Foo()</td> 
   <td>Foo()</td> 
  </tr> 
 </tbody> 
</table>

我们可以看到在 `deepCopy()` 中，已经对大部分的属性都能进行复制了，不过要看到在 `arr2、obj2` 对 `null` 的转换仍有问题，会把 null 复制成 \{\} 一个空对象。

并且我们在 `deepCopy()` 中用 `Object.create()` 取代 `{}` 来创建对象，使 `__proto__.constructor` 不丢失。

## 总结 ##

一个完善的深拷贝是不好实现的，还有许多可完善的点：比如能拷贝自身可枚举、自身不可枚举、自身 Symbol 类型、原型上可枚举、原型上不可枚举、原型上 Symbol、循环引用等等，不过上面的方法在日常使用应该还是足够的。

>   有兴趣的可以看看下面几篇文章，当然也可以看看 JQuery、lodash 等库中对深拷贝的实现。
> 
> [深入深入再深入 js 深拷贝对象][js]  
> [从零实现jQuery的extend][jQuery_extend]

[70]: /images/20220515/d7260229c6464c70b382dce4e82546fd.png
[70 1]: /images/20220515/e294890b467f4d33a072d41ded54b1e6.png
[70 2]: /images/20220515/0c457a1b77714c1a8cd56523ca77c7a0.png
[js]: https://juejin.im/post/5ad6b72f6fb9a028d375ecf6
[jQuery_extend]: https://github.com/mqyqingfeng/Blog/issues/33