实现深拷贝

---

前言

本文介绍了深拷贝的3种实现方法。

---

一、深拷贝是什么？

深拷贝与浅拷贝是相对的概念，我们先了解一下浅拷贝和深拷贝

• 浅拷贝：浅拷贝指的是将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型的引用，浅拷贝可以使用Object.assign和展开运算符来实现
• 深拷贝：深拷贝相对浅拷贝而言，如果遇到属性值为引用类型的时候，它新建一个引用类型并将对应的值复制给它，因此对象获得的一个新的引用类型而不是一个原有类型的引用。

二、深拷贝的实现

1.JSON.stringify()

代码如下（示例）：

  let obj1 = {
    a: 0,
    b: {
      c: 1
    }
  };
  let obj2 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 1;
  obj1.b.c = 2;

  console.log(obj1)
  console.log(obj2)

• JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一，它的原理就是利用JSON.stringify将js对象序列化(JSON字符串)，再使用JSON.parse来反序列化(还原)js对象。这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined,symbol,当使用过JSON.stringify()进行处理之后，都会消失

代码如下：

  let obj1 = {
    a: 0,
    b: {
      c: 1,
      d: function () {
        console.log('1')
      }
    }
  };

  let obj2 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 1;
  obj1.b.c = 2;

  console.log(obj1)
  console.log(obj2)

---

2.函数库lodash的_.closeDeep方法

该函数库也有提供_.cloneDeep用来做Deep Copy
代码如下：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

 var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
  }
  var obj2 = _.cloneDeep(obj1);
  console.log(obj1.b.f === obj2.b.f) //false
  obj1.a = 2;
  obj1.c[2] = 4;
  obj1.b.f.g = 5
  console.log(obj1)
  console.log(obj2)

---

3.手写实现深拷贝

代码如下：

  function deepCopy (object) {
    if (!object || typeof object !== 'object') return
    let newObject = Array.isArray(object) ? [] : {}
    for (let key in object) {
      if (object.hasOwnProperty(key)) {
        newObject[key] = typeof object[key] === 'object' ? deepCopy(object[key]) : object[key];
      }
    }
    return newObject
  }
  var obj1 = {
    a: 1,
    b: { f: { g: 1 } },
    c: [1, 2, 3]
  }
  var obj2 = deepCopy(obj1);

  obj1.a = 2;
  obj1.c[2] = 4;
  obj1.b.f.g = 5
  console.log(obj1)
  console.log(obj2)

总结

以上就是今天要讲的内容，本文简单介绍了实现深拷贝的几种方法