JS手写实现深拷贝(考虑循环引用)

作为一个前端，一定对深拷贝这个名词不陌生，深拷贝是非常重要的。

为什么存在深拷贝？

深拷贝这个名词的诞生也是有由来的，在JS里，所有的变量类型都可以简单分为基本类型和应用类型。

比如 123, 'aaa' 数值和字符串，属于基本类型，它们在进行赋值的时候，可以直接赋值，比如let a = 123, b = a;这个是没有问题的，a和b互不影响。

但是[1, 2, 3] { a: 1 }，像数组和对象这种引用类型，在进行赋值拷贝的时候，简单的=并不足够，如果你依然像对待基本类型一样对待引用类型的拷贝。你拷贝的只是一个单纯的内存地址，他们会互相影响。

基本类型和引用类型的关系，大家可以自己找资料学习，这里不过多赘述，反正要知道一点，深拷贝诞生是因为JS存在引用类型的数据导致的。

在前端的面试中，手写深拷贝的问题出现率非常之高。在一些大厂中，还要让你考虑很多的情况，比如循环引用之类的。

什么是循环引用？

比如

let obj1 = {};
let obj2 = {};
obj1.obj2 = obj2;
obj2.obj1 = obj1;

这样就会造成对象间的循环引用，这个也需要考虑在深拷贝的实现之中。

手写实现深拷贝(不考虑循环引用)

我们先实现一个最基本的深拷贝版本，不考虑循环应用。

function deepClone(obj, newObj) {
  newObj = newObj || {};

  for (let i in obj) {
    if (typeof obj[i] === "object") {
      newObj[i] =
        Object.prototype.toString.call(obj[i]) === "[object Array]" ? [] : {};
      deepClone(obj[i], newObj[i]);
    } else {
      newObj[i] = obj[i];
    }
  }
}

最基本的思路是依赖递归来实现。

对需要深拷贝的obj变量进行for in循环，判断每个属性的类型。我这里使用的是Object.prototype.toString方法来判断变量类型，也可以用其它方法。

如果当前循环的属性是基本类型，直接进行 = 赋值，如果是引用类型，就进行递归，直到当前属性递归到基本类型，再进行赋值。

其实还是比较简单的。

我们来验证一下，是否实现了深拷贝。

let obj = {
  name: "微信公众号: Code程序人生",
  age: 22,
  sex: "男",
  hobby: ["跑步", "读书", "睡觉"],
  fn: function () {
    console.log(this.name);
  },
};

let newObj = {};

deepClone(obj, newObj);

obj.name = 'CreatorRay1';
obj.hobby[0] = '运动';

console.log('newObj', newObj);
console.log('obj', obj);

通过结果可以看到，新创建的newObj对象跟obj对象互不联系，在修改某一方的值时，另一方并不受到影响，所以它们的内存地址是不一样的。

如果我们直接 = 赋值，会是什么样子？

let obj = {
  name: "微信公众号: Code程序人生",
  age: 22,
  sex: "男",
  hobby: ["跑步", "读书", "睡觉"],
  fn: function () {
    console.log(this.name);
  },
};

let newObj = {};

// deepClone(obj, newObj);

newObj = obj;

obj.name = 'CreatorRay1';
obj.hobby[0] = '运动';

console.log('newObj', newObj);
console.log('obj', obj);

两个对象相互影响。

那么，如果我们在这个版本进行循环引用呢？

let obj = {
  name: "微信公众号: Code程序人生",
  age: 22,
  sex: "男",
  hobby: ["跑步", "读书", "睡觉"],
  fn: function () {
    console.log(this.name);
  },
};

let obj1 = {};

let newObj = {};

obj.obj1 = obj1;
obj1.obj = obj;

deepClone(obj, newObj);

obj.name = 'CreatorRay1';
obj.hobby[0] = '运动';

console.log('newObj', newObj);
console.log('obj', obj);

会直接报错。

考虑循环引用实现深拷贝

在实现兼容循环引用之前，需要铺垫一下WeakMap的知识，实现的主要原理就是基于WeakMap的。

WeakMap可以算是Map的一个加强版。

同样都是key , value的形式保存变量，WeakMap和Map最大的区别就是，WeakMap是弱引用的，当它的键在外部失去引用时，这组键值对自动删除。

基于WeakMap的原理，我们就可以全面完善深拷贝的代码。

function deepClones(origin, map = new WeakMap()) {
  // origin == undefined可以同时判断undefined和null
  if (origin == undefined || typeof origin !== "object") {
    return origin;
  } else if (origin instanceof Date) {
    return new Date(origin);
  } else if (origin instanceof RegExp) {
    return new RegExp(origin);
  } else {
    const key = map.get(origin);

    if (key) {
      return key;
    }

    const target = new origin.constructor();
    map.set(origin, target);
    for (let k in origin) {
      target[k] = deepClones(origin[k], map);
    }
    return target;
  }
}

针对Date、RegExp等类型的变量，也可以额外进行判断。

解释一下这个版本和上个版本的区别：

• origin == undefined可以同时判断undefined和null两种情况
• target不是通过Object.prototype.toString来判断当前的属性是数组还是对象了，而是new当前属性的constructor，对于constructor不太了解的同学可以自行补习一下。简单解释就是如果当前属性是数组，它的constructor就是Array就相当于new Array了，属性是对象的话，同理new Object了。
• 通过WeakMap来存储每次递归的键值对，如果当前递归的属性已存在就直接返回。

这个版本和上个版本相对，整体都清晰明了了，而且更加体现了自己的技术含量，如果你能在面试时写出这个版本的深拷贝，相信一定会给你加很多分。

下面我们来检验一下效果。

首先是正常拷贝。

let obj = {
  name: "微信公众号: Code程序人生",
  age: 22,
  sex: "男",
  hobby: ["跑步", "读书", "睡觉"],
  fn: function () {
    console.log(this.name);
  },
};

let obj1 = {};

// obj.obj1 = obj1;
// obj1.obj = obj;

let newObj = deepClones(obj);

obj.name = 'CreatorRay1';
obj.hobby[0] = '运动';

console.log('newObj', newObj);
console.log('obj', obj);

我们在使用中有些许的变化，上个版本我们传入了第二个参数，代表我们拷贝后的结果。这个版本就不需要额外传第二个参数了。

正常，两个对象未受到彼此影响。

试一下循环应用的情况。

let obj = {
  name: "微信公众号: Code程序人生",
  age: 22,
  sex: "男",
  hobby: ["跑步", "读书", "睡觉"],
  fn: function () {
    console.log(this.name);
  },
};

let obj1 = {};

obj.obj1 = obj1;
obj1.obj = obj;

let newObj = deepClones(obj);

obj.name = 'CreatorRay1';
obj.hobby[0] = '运动';

console.log('newObj', newObj);
console.log('obj', obj);

可以看到没有报错，而且循环引用的值也都正常显示。

欢迎大家关注我的公众号，有很多关于前端的内容哦
QQ：505417246
WX：18331092918
公众号：Code程序人生
B站账号：LuckyRay123
个人博客：http://rayblog.ltd/