JavaScript浅拷贝和深拷贝

JavaScript引用类型的拷贝分为浅拷贝和深拷贝。

浅拷贝: 只拷贝对象的引用，而不是对象本身。

深拷贝：将当前对象的所有属性和方法完整拷贝。

浅拷贝

我们这里借助三点运算符实现浅拷贝

let obj = {
 a: 1,
 cat: {
  name: 1,
  age: 2,
  tags: ["小叮当"],
 },
};
let copy = { ...obj };
copy.cat.name = 2;
console.log(copy.cat.name, obj.cat.name);
// 2 2

这段代码可能会让人误以为浅拷贝会完整拷贝第一层的属性，但是其实并不是。

let obj = {
 a: 1,
 cat: {
  name: 1,
  age: 2,
  tags: ["小叮当"],
 },
};
let copy = { ...obj };
copy.cat = { a: 1 };
console.log(copy.cat, obj.cat);
// { a: 1 } { name: 1, age: 2, tags: [ '小叮当' ] }

因为浅拷贝是是拷贝对象的引用，因此copy.cat = { a: 1 };是改变了copy.cat的引用，而obj.cat的引用却没有改变，还是原来的那个对象，因此最后两者的值不同。

深拷贝

JSON.parse(JSON.stringify(obj));能够实现深拷贝

let obj = {
 a: 1,
 cat: {
  name: 1,
  age: 2,
  tags: ["小叮当"],
 },
};
let copy = JSON.parse(JSON.stringify(obj));
copy.cat.age = 10;
console.log(copy.cat.age, obj.cat.age);
// 10 2

但是它存在一些问题。

• 会抛弃对象的constructor，所有对象的constructor都会变为Object
• 无法实现对函数、RegExp等特殊对象的克隆
• 循环引用会报错

循环引用报错

let obj = {
 a: 1,
 age: obj.a,
 cat: {
  name: 1,
  age: 2,
 },
};
let copy = JSON.parse(JSON.stringify(obj));
copy.cat.age = 10;
console.log(copy.cat.age, obj.cat.age);
// ReferenceError: Cannot access 'obj' before initialization

手动实现深克隆

let obj = {
 a: 1,
 b: /1/g,
 cat: {
  name: 1,
  age: 2,
  callMe: function () {
   console.log("me");
  },
 },
 set: new Set([1, 2, 3]),
 map: new Map([
  [1, 2],
  [3, 4],
 ]),
};

// 判断类型
function getType(target) {
 return Object.prototype.toString.call(target).slice(8, -1);
}
// 递归处理
function deepCopy(target) {
 if (getType(target) === "Array") {
  let arr = [];
  for (let i in target) {
   arr.push(deepCopy(target[i]));
  }
  return arr;
 } else if (getType(target) === "Object") {
  let obj = {};
  for (let i of Object.keys(target)) {
   obj[i] = deepCopy(target[i]);
  }
  return obj;
 } else if (getType(target) === "Function") {
  const fn = target.toString();
  return new Function("return " + fn)();
 } else if (getType(target) === "RegExp" || getType(target) === "Date") {
  return new target.constructor(target);
 } else if (getType(target) === "Set") {
  const set = new Set();
  target.forEach((val) => {
   set.add(deepCopy(val));
  });
  return set;
 } else if (getType(target) === "Map") {
  const map = new Map();
  for (let item of target) {
   map.set(deepCopy(item[0]), deepCopy(item[1]));
  }
  return map;
 } else if (!(target instanceof Object)) {
  // 原始类型
  return target;
 } else {
  console.error("未拦截的类型 ", target);
 }
}
// 封装成一个处理函数
function handleDeepCopy(target) {
 if (getType(target) !== "Array" && getType(target) !== "Object") {
  throw new Error("必须传入一个对象或者数组");
 }

 let copy = Object.create(target.prototype || null);
 for (let i in target) {
  copy[i] = deepCopy(target[i]);
 }
 return copy;
}

// 验证是否拷贝成功
const copyObj = handleDeepCopy(obj);
console.log(copyObj);
/*
[Object: null prototype] {
  a: 1,
  b: /1/g,
  cat: { name: 1, age: 2, callMe: [Function (anonymous)] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
}
$1*/
// 验证深拷贝
copyObj.cat.name = "阿花";
console.log(copyObj, obj);
/*
{
  a: 1,
  b: /1/g,
  cat: { name: '阿花', age: 2, callMe: [Function (anonymous)] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
} 
{
  a: 1,
  b: /1/g,
  cat: { name: 1, age: 2, callMe: [Function: callMe] },
  set: Set(3) { 1, 2, 3 },
  map: Map(2) { 1 => 2, 3 => 4 }
}
$1*/
// 验证函数拷贝是否成功
copyObj.cat.callMe();
// me

这样就手动实现了深拷贝，这种方式覆盖了所有常用类型，如果遇到没有覆盖的类型，再往deepCopy函数里加处理语句即可。

以上代码并非完美的，它仍然无法处理循环引用的问题。