手写深拷贝

要想自己手写一个深拷贝，那就需要我们知道深拷贝的原理，它里面做了什么，我们才能写出自己的深拷贝

简述深浅拷贝

JavaScript 中有2种变量类型：值类型（基本类型）和引用类型。
深拷贝和浅拷贝都是针对引用类型。

深浅拷贝的基础，如果还不熟悉的，可以前往这里回顾

如果深浅拷贝都只是针对引用类型，那上面文章里面的疑问：基本数据是深拷贝就不对了

然后新的🤔️又产生了

🤔️ 如果一个对象里面都是基本数据类型，没有第二层，我用Object.assign()和…都是深拷贝，对吗？

但是如果深浅拷贝的定义是下面：

浅拷贝

创建一个新的对象，把原有对象的属性值，其中包括了基本类型的值，和引用类型的内存地址，完整的拷贝过去。
如果其中一个对象改变了引用类型的内存地址，就会影响到另一个对象。

深拷贝

将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象。

上面的定义不管方法的结果，不去管拷贝的数据，只看它具体做的内容，那Object.assign()和…都是浅拷贝

写之前的考虑

数据类型：基本类型还是引用类型
数据规模：数据有多少属性
性能要求：对时间、速度、空间是否有要求
运行环境：在IE6 还是 Chrome 里运行
其他 …

JSON.parse(JSON.stringify(object))

这个方法造成的问题，在前面那篇基础的文章就列举了，这里就不再去一一分析了

那如果数据包含了undefined、symbol、fuction、循环引用的对象、new Date()、正则,那我们该如何深拷贝呢？

递归克隆

思路：

先判断节点类型

基本类型：直接拷贝
引用类型（object）：分情况讨论
①普通 object : 用 for in ？注意， for in 默认会遍历原型上的属性
②数组 array
③函数 function
④日期 Date

基本类型的拷贝

1
2
3

function deepClone(source) {
  return source
}

引用类型的拷贝

普通对象和数组

function deepClone(source) {
  if(source instanceof Object) {
    let dist;
    if(source instanceof Array) {
      dist = [];
    }
    dist = {};
    for(let key in source) {
      dist[key] = deepClone(source[key])
    }
    return dist;
  }
  return source
}

函数

else if (source instanceof Function) {
   dist = function () {
      //拷贝参数和函数体
     return source.call(this, arguments)
   }
}

如果遇到环

环：window对象里就有环
window.self === window //true
利用缓存标记，通过缓存检查环，如果第一次出现过，第二次再出现将不克隆

let cache = []  //初始化
function deepClone(source){
    if(source instanceof Object){
        let cacheDist = findCache(source)
        if(cacheDist){    //有缓存
            return cacheDist
        }else{     //没缓存
            let dist
            //...(省略)
            cache.push([source, dist])
            for(let key in source){
                dist[key] = deepClone(source[key])
            }
            return dist
        }
    }
    return source
}
//查找缓存
function findCache(source) {
  for (let i = 0; i < cache.length; i++) {
    if (cache[i][0] === source) {    //对比 source 返回 dist
      return cache[i][1]
    }
  }
  return undefined
}

Date

1
2
3

else if (source instanceof Date) {
    dist = new Date(source)
}

RegExp

RegExp的重要属性：

1
2
3

var a = /hi\d+/gi
console.log(a.source)   //"hi\d+"
console.log(a.flags)    //"gi"

拷贝实现：

1
2
3

else if (source instanceof RegExp) {
  dist = new RegExp(source.source, source.flags);
}

是否需拷贝原型上的属性

一般来说，不拷贝原型上的属性，如果拷贝的话，内存占用太多了。
注意：使用 for in对每个属性克隆时， for in默认会遍历原型上的属性

代码实现：

for(let key in source) {
  if(source.hasOwnProperty(key){
    dist[key] = deepClone(source[key])
  }
}

优化

cache 会被全局共享，造成互相污染。
cache每次存入对象后，没有清空，下次deepClone时会和上一次的互相影响。
改善方法：每次deepClone，只用一个cache，通过面向对象，使用 class

class DeepCloner {
  constructor() {
    this.cache = []
  }
  clone(source) {
    if (source instanceof Object) {
      let cacheDist = this.findCache(source)
      if (cacheDist) { //有缓存
        return cacheDist
      } else { //没缓存
        let dist
        if (source instanceof Array) {
          dist = new Array()
        } else if (source instanceof Function) {
          dist = function () {
            return source.apply(this, arguments)
          }
        } else if (source instanceof RegExp) {
          dist = new RegExp(source.source, source.flags)
        } else if (source instanceof Date) {
          dist = new Date(source) //拷贝后的也会有 getTime 方法，可以进行比较了
        } else {
          dist = new Object()
        }
        this.cache.push([source, dist]) //先把 dist 放到里面
        for (let key in source) {
          if (source.hasOwnProperty(key)) {
            dist[key] = this.clone(source[key])
          }
        }
        return dist
      }
    }
    return source
  }
  findCache(source) {
    for (let i = 0; i < this.cache.length; i++) {
      if (this.cache[i][0] === source) { //对比 source return dist
        return this.cache[i][1]
      }
    }
    return undefined
  }
}

module.exports = DeepCloner