一、深拷贝与浅拷贝

• 什么是深拷贝 深拷贝是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象（新旧对象不共享同一块内存），且修改新对象不会影响原对象（深拷贝采用了在堆内存中申请新的空间来存储数据，这样每个可以避免指针悬挂）

• 什么是浅拷贝 如果属性是基本类型，拷贝的就是基本类型的值。如果属性是引用类型，那么拷贝的就是内存地址（新旧对象共享同一块内存），所以如果其中一个对象改变了这个地址，就会影响到另一个对象（只是拷贝了指针，使得两个指针指向同一个地址）

二、赋值与浅拷贝的区别

• 把一个对象赋值给一个新的变量的时候，赋的其实是该对象在栈中的地址，而不是栈中的数据。也就是这两个对象指的是同一个储存空间，不论哪个对象发生改变，其实都是改变储存空间里的内容。因此，两个对象是联动的。

• 浅拷贝是按位拷贝对象的，他会创建一个新的对象，这个对象有着原始对象属性值的一份精确拷贝。

  
  

如果属性是基本类型，拷贝的就是基本类型的值。
如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果一个对象改变了这个地址，就会影响到另一个对象。
即默认拷贝构造函数只是对对象进行浅拷贝复制（逐个成员依次拷贝），即只复制对象空间而不复制资源。

对象赋值：
  let obj1 = {
name:'chen',
age: 26,
hobby:['baskitball','swim','run','eat']
  }
  let obj2 = obj1
  obj2.name = 'zi'
  obj2.age = 100
  obj2.hobby[0] = 'play games'
  console.log(obj1) // {"name":"zi","age":100,"hobby":["play games","swim","run","eat"]}
  console.log(obj2) // {"name":"zi","age":100,"hobby":["play games","swim","run","eat"]}

浅拷贝：
  obj1 = {
  name:'chen',
  age: 26,
  hobby:['baskitball','swim','run','eat']
  }
  obj3 = {...obj1}
  obj3.name = 'zi'
  obj3.age = 100
  obj3.hobby[0] = 'play games'
  console.log(obj1)  //{"name":"chen","age":26,"hobby":["play games","swim","run","eat"]}
  console.log(obj3)  //{"name":"zi","age":100,"hobby":["play games","swim","run","eat"]}

三、浅拷贝的实现【当拷贝对象只有一层的时候，是深拷贝】

展开运算符...

  obj1 = {
  name:'chen',
  hobby:['baskitball','swim','run','eat']
  }
  obj2 = {...obj1}
  obj2.name = 'zi'
  obj2.hobby[0] = 'play games'
  console.log(JSON.stringify(obj1))  //{"name":"chen","age":26,"hobby":["play games","swim","run","eat"]}
  console.log(JSON.stringify(obj2))  //{"name":"zi","age":100,"hobby":["play games","swim","run","eat"]}

Object.assign()

  obj1 = {
  name:'chen',
  hobby:['baskitball','swim','run','eat']
  }
  obj2 = Object.assign({},obj1)
  obj2.name = 'zi'
  obj2.hobby[0] = 'play games'
  console.log(JSON.stringify(obj1))  //{"name":"chen","age":26,"hobby":["play games","swim","run","eat"]}
  console.log(JSON.stringify(obj2))  //{"name":"zi","age":100,"hobby":["play games","swim","run","eat"]}

当object只有一层的时候，是深拷贝；所以当原数据进行浅拷贝，改变obj2的name 原数据obj1中的name不会改变；

Array.prototype.concat()

   arr1 = [
   {
           name:'chen'
   },
   'baskitball',
   'swim',
   'run',
   'eat'
   ]
   arr2 = arr1.concat([]);
   arr2[0].name = 'zi'
   arr2[1]= 'play games'
   console.log(JSON.stringify(arr1))  //[{"name":"zi"},"baskitball","swim","run","eat"]
   console.log(JSON.stringify(arr2))  //[{"name":"zi"},"play games","swim","run","eat"]

Array.prototype.slice()

  arr1 = [
      {
          name:'chen'
      },
      'baskitball',
      'swim',
      'run',
      'eat'
  ]
  arr2 = arr1.slice();
  arr2[0].name = 'zi'
  arr2[1]= 'play games'
  console.log(JSON.stringify(arr1))  //[{"name":"zi"},"baskitball","swim","run","eat"]
  console.log(JSON.stringify(arr2))  //[{"name":"zi"},"play games","swim","run","eat"]

 当Array只有一层的时候，是深拷贝；所以当原数据进行浅拷贝，改变arr2的arr[1],而原数据arr1中的arr1[1]没有改变；

三、深拷贝的实现

JSON.parse(JSON.stringify())

obj1 = {
      name:'chen',
      hobby:['baskitball','swim','run','eat']
  }
  obj2 = JSON.parse(JSON.stringify(obj1))
  console.log(obj1 === obj2)  //false
  obj2.hobby[0] = 'play games'
  obj2.name = 'zi'
  console.log(JSON.stringify(obj1))  //{"name":"chen","hobby":["baskitball","swim","run","eat"]}
  console.log(JSON.stringify(obj2))  //{"name":"zi","hobby":["play games","swim","run","eat"]}

这个方法可以简单粗暴的实现深拷贝，但是还存在问题，拷贝的对象中如果有函数，undefined，symbol，当使用过JSON.stringify()进行处理之后，都会消失。

手写递归方法：(递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝)

  function cloneDeep(obj) {
  //数据类型为引用数据类型
  if (typeof obj == 'object') {
  //初始化返回结果
let result = Array.isArray(obj) ? [] : {};
fot(let key in obj) {
//避免相互引用出现死循环导致爆栈
if (obj === obj[key]) {
continue
}
if (obj.hasOwnProperty(key)) {
//递归调用
result[key] = deepClone(obj[key])
}
}
return result
  } else {
  //基本数据类型，直接返回
  return obj
  }
  }

 这个方法其实也是有缺陷的，没法拷贝一些特殊对象（如 new Map() ）

jQuery的extend方法实现深拷贝

  var array = [1,2,3,4];
  var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝

函数库lodash的_.cloneDeep方法

var _ = require('lodash')
  var obj = {
    a: {
      c: 2,
      d: [9, 8, 7]
    },
    b: 4
  }
  var obj1 = _.cloneDeep(obj)
  console.log(obj === obj1);//false
```</em></p>