浅谈JavaScript的 深拷贝和浅拷贝

本文在github和掘金进行了收录。
掘金：https://juejin.im/post/5da5bc...
github: https://github.com/Michael-lz...

深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

浅拷贝

浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

区别

浅拷贝和深拷贝都只针对于引用数据类型。

1、浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；
2、深拷贝会另外创造一个一模一样的对象，跟原对象不共享内存，修改新对象不会改到原对象；
3、区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制。

let obj = {
  name: 'Yvette',
  age: 18,
  hobbies: ['reading', 'photography']
}
let obj1 = obj
let obj2 = Object.assign({}, obj)
let obj3 = JSON.parse(JSON.stringify(obj))

obj.name = 'Jack'
obj.hobbies.push('coding')
console.log(obj) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj1) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj2) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj3) //{ name: 'Yvette', age: 18,hobbies: [ 'reading', 'photography' ] }

从以上例子可以看出，当数据为引用数据类型时

1、直接赋值属于浅拷贝
2、Object.assign，当数据第一层为基本数据类型时，新的对象和原对象互不影响，但是如果第一层的属性值是复杂数据类型，那么新对象和原对象的属性值其指向的是同一块内存地址。
3、JSON.parse(JSON.stringify(obj))可实现深拷贝

深拷贝的实现

1、JSON.parse(JSON.stringify(obj)) 但存在一些缺陷

• 对象的属性值是函数时，无法拷贝。
• 原型链上的属性无法拷贝
• 不能正确的处理 Date，RegExp 类型的数据
• 会忽略 undefined

2、实现一个 deepClone 函数

• 如果是基本数据类型，直接返回
• 如果是 RegExp 或者 Date 类型，返回对应类型
• 如果是复杂数据类型，递归。
• 考虑循环引用的问题

function deepClone(obj, hash = new WeakMap()) {
  //递归拷贝
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return new Date(obj)
  if (obj === null || typeof obj !== 'object') {
    //如果不是复杂数据类型，直接返回
    return obj
  }
  if (hash.has(obj)) {
    return hash.get(obj)
  }
  /**
   * 如果obj是数组，那么 obj.constructor 是 [Function: Array]
   * 如果obj是对象，那么 obj.constructor 是 [Function: Object]
   */
  let t = new obj.constructor()
  hash.set(obj, t)
  for (let key in obj) {
    //递归
    if (obj.hasOwnProperty(key)) {
      //是否是自身的属性
      t[key] = deepClone(obj[key], hash)
    }
  }
  return t
}