JS中浅拷贝和深拷贝的使用，深拷贝实现方法总结

1、浅拷贝：两个对象经过拷贝后虽然具有相同的属性，但是他们都指向同一个内存空间。操作会引起引用，同一地址的变量一起改变。

let a = {x: 1}
let b = a
b.x = 2
console.log(b)   // {x: 2}
console.log(a)   // {x: 2}

2、深拷贝：两个对象除了拷贝了一样的属性, 没有任何其他关联（指向不同的内存空间）。

实现深拷贝的方法：

（1）ES5 for循环赋值

//普通对象，单层属性
let souceObj = {x: 1, y: 2} 
 
function clone(souceObj, targetObj = {}) {
    for (const key in souceObj) {
        targetObj[key] = souceObj[key]
    }
 
    return targetObj
}
 
let targetObj = clone(souceObj)
targetObj.x = 10
console.log(souceObj)   //{ x: 1, y: 2 }
console.log(targetObj)  //{ x: 10, y: 2 }

（2）JSON parse stringify

let souceObj = {x: 1, y: 2}
let targetObj = JSON.parse(JSON.stringify(souceObj))
targetObj.x = 10
console.log(souceObj)   //{ x: 1, y: 2 }
console.log(targetObj)  //{ x: 10, y: 2 

这样做是真正的Deep Copy，这种方法简单易用。

但是这种方法也有不少坏处，譬如它会抛弃对象的constructor。也就是深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。

（3）ES6 操作符 ...

let souceObj = {x: 1, y: 2}
let targetObj = {...souceObj}
targetObj.x = 10
console.log(souceObj)   //{ x: 1, y: 2 }
console.log(targetObj)  //{ x: 10, y: 2 }

（4）ES6  Object.assign()

let souceObj = {x: 1, y: 2}
let targetObj = Object.assign({}, souceObj)
targetObj.x = 10
console.log(souceObj)   //{ x: 1, y: 2 }
console.log(targetObj)  //{ x: 10, y: 2 }

（5）递归深拷贝

function deepCopy(obj) {
  // 只拷贝对象
  if (typeof obj !== 'object') return;
  // 根据obj的类型判断是新建一个数组还是一个对象
  var newObj = obj instanceof Array ? [] : {};
  for (let key in obj) {
    // 遍历obj,并且判断是obj的属性才拷贝
    if (obj.hasOwnProperty(key)) {
      // 判断属性值的类型，如果是对象递归调用深拷贝
      newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
    }
  }
  return newObj;
}