手写JS系列-深拷贝

我们知道JS中数据类型分为基本数据类型和引用数据类型，基本数据类型之间的赋值是在内存中重新分配空间且保存着一样的值，而引用类型之间的赋值只是复制引用值，当原来对象中的属性值发生变化，另一个对象的属性值也会发生变化，这种现象正常来说并不是我们想要的。深拷贝就是要实现复制一个对象，且保证两个对象在内存中互相独立，一个对象属性值的改变不影响已拷贝的对象中的属性值。简单的代码实现如下：

let obj = {
  name: '小明',
  colors: ['red', 'green', 'blue'],
  address: {
    province: '广东',
    city: '广州'
  }
}
function deepClone(obj) {
  // 如果要拷贝的值不是引用类型的，原值返回
  if(typeof obj !== 'object' || obj == null) {
    return obj
  }

  let cloneObj
  if(obj instanceof Array) {
    cloneObj = []
  }else {
    cloneObj = {}
  }
  for(let key in obj) {
    // 只拷贝对象自身的属性值，不拷贝原型上的属性值
    if(obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key])
    }
  }
  return cloneObj
}

let newObj = deepClone(obj)
console.log(obj)
newObj.colors[0] = 'black'
newObj.address.city = '深圳'
console.log(newObj)

输出

/*
{
  name: '小明',
  colors: [ 'red', 'green', 'blue' ],
  address: { province: '广东', city: '广州' }
}
{
  name: '小明',
  colors: [ 'black', 'green', 'blue' ],
  address: { province: '广东', city: '深圳' }
}
*/

观察结果，新对象属性值的改变不影响原来的对象。