js中的深复制与浅复制

要了解什么是深拷贝，什么是浅拷贝，首先要了解JavaScript中的基本数据类型

1. JavaScript分为基本数据类型和引用数据类型

1. 基本数据类型包括String, Number, Boolean, Null, Undefined，Symbol
2. 引用数据类型包括array，object，function

2. 数据存放在什么地方？

1. 基本数据类型：基本数据类型的数据存放在栈中
2. 引用数据类型：引用数据类型的指针存放在栈中，真实数据存放在堆中，当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

关于栈内存与堆内存详细内容参见另一篇文章(JS中的内存管理)

3. . 深拷贝与浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝只复制指向某个对象的指针（只复制第一层数据，引用类型的子属性不会被复制，引用类型的子属下新旧对象还是共享同一块内存，当改变其中任意一个对象的某一属性时，另一个对象的属性也会改变），而不复制对象深层数据。

浅复制.png

例如：
1.首先看一下赋值

let a = {}    // 声明空对象
let b = a    // a ，b 都指向空对象

a.name = 'Mark'    // a添加name属性，实则给空对象添加name，a，b都会变化
console.log(a.name);    // 输出  'Mark'
console.log(b.name);    // 输出  'Mark'

2. 浅拷贝
   方法一 循环

// 浅拷贝就是复制第一层对象的数据，子数据的对象属性不会被复制，如果改变其中一个子数据对象属性，另一个也会改变
function simpleCopy(obj1) {
   var obj2 = Array.isArray(obj1) ? [] : {};
    // 循环只能取到第一层
   for (let i in obj1) {
   obj2[i] = obj1[i];
  }
   return obj2;
}
// 声明对象obj1，含有子数据的对象c
var obj1 = {
   a: 1,
   b: 2,
   c: {
         d: 3
      }
}
// 调用浅复制函数
var obj2 = simpleCopy(obj1)
console.log(obj1,obj2)  
// 此时obj1，obj2数据一样，如果改变obj1的a属性，会如何呢？
obj2.a = 3
console.log(obj1.a)   // 输出1
console.log(obj2.a)   // 输出3
// 两个对象的第一层数据，互不影响，复制成功，如果改变c对象里面的d属性呢？
obj2.c.d = 4
console.log(obj1.c.d)   // 输出4
console.log(obj2.c.d)   // 输出4
// 都输出4，改变obj1中的c对象的d属性，obj2也相应变化

方法二 ES6：Object.assign()

var obj2 = Object.assign(obj1) 

结论： 因为浅拷贝只复制一层对象的属性，并不包括对象里面的为引用类型的数据。所以就会出现改变浅拷贝得到的 obj2 中的引用类型时，会使原始数据得到改变

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
也就是说，深拷贝就是对 对象以及对象的所有子对象进行拷贝。

深复制.png

例如：

1. 使用递归函数，进行深拷贝

// 递归函数
function deepCopy(obj1) {
      var obj2 = Array.isArray(obj1) ? [] : {};
      if (obj1 && typeof obj1 === "object") {
        for (var i in obj1) {
          var prop = obj1[i]; // 避免相互引用造成死循环，如obj1.a=obj
          if (prop == obj1) {
            continue;
          }
          if (obj1.hasOwnProperty(i)) {
            // 如果子属性为引用数据类型，递归复制
            if (prop && typeof prop === "object") {
              obj2[i] = (prop.constructor === Array) ? [] : {};
              arguments.callee(prop, obj2[i]); // 递归调用
            } else {
              // 如果是基本数据类型，只是简单的复制
              obj2[i] = prop;
            }
          }
        }
      }
      return obj2;
    }
// 声明对象obj1，含有子数据的对象c
var obj1 = {
   a: 1,
   b: 2,
   c: {
         d: 3
      }
}
// 调用递归函数
var obj2 = simpleCopy(obj1)
console.log(obj1,obj2)  
// 此时obj1，obj2数据一样，如果继续改变obj1的a属性，会如何呢？
obj2.a = 3
console.log(obj1.a)   // 输出1
console.log(obj2.a)   // 输出3
// 两个对象的第一层数据，互不影响，复制成功，如果改变c对象里面的d属性呢？
obj2.c.d = 4
console.log(obj1.c.d)   // 输出3
console.log(obj2.c.d)   // 输出4
// 改变obj1中的c对象的d属性，obj1原数据没有变化

2. 使用JSON解析，进行深拷贝

JSON.parse(JSON.stringify(o))

限制：只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON的并不适用