当前位置：首页 > article >正文

JSON.stringify 实现深度克隆的缺陷

article 2025/1/11 22:58:00

在前端开发中，深克隆（Deep Clone）和浅克隆（Shallow Clone）是常见的操作。浅克隆和深克隆的区别主要体现在对象内部嵌套对象的处理方式上。

1. 浅克隆（Shallow Clone）

浅克隆是指创建一个新对象，但对于原对象中嵌套的对象，浅克隆只复制它们的引用，而不是创建新的对象。换句话说，浅克隆只是“浅复制”了对象的属性，嵌套的对象还是共享相同的引用。

🌰：

// 浅克隆
const shallowClone = (obj) => {
  return { ...obj };
};

// 或者使用 Object.assign
const shallowClone2 = (obj) => {
  return Object.assign({}, obj);
};

const obj1 = { name: 'John', address: { city: 'NY' } };
const obj2 = shallowClone(obj1);

obj2.address.city = 'LA';

console.log(obj1.address.city); // 输出 'LA'
console.log(obj2.address.city); // 输出 'LA'

2. 深克隆（Deep Clone）

深克隆是指创建一个新对象，并且递归地复制原对象中的所有属性，包括嵌套的对象（嵌套对象也会被克隆为新的对象）。这样，修改新对象不会影响到原对象，反之亦然。

1. 递归实现

// 深克隆实现（递归）
const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj;
  const newObj = Array.isArray(obj) ? [] : {};  // 判断是数组还是对象
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]);  // 递归克隆
    }
  }
  return newObj;
};
const obj1 = { name: 'John', address: { city: 'NY' }, hobbies: ['reading', 'gaming'] };
const obj2 = deepClone(obj1);
obj2.address.city = 'LA';
obj2.hobbies[0] = 'traveling';
console.log(obj1.address.city);  // 输出 'NY'
console.log(obj2.address.city);  // 输出 'LA'
console.log(obj1.hobbies[0]);   // 输出 'reading'
console.log(obj2.hobbies[0]);   // 输出 'traveling'

2. JSON 方法

JSON.parse(JSON.stringify(...)) ：是前端开发中常用的一种快速实现深克隆的方法，但它也有一些缺陷。

const deepCloneUsingJSON = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

const obj1 = { name: 'John', address: { city: 'NY' }, hobbies: ['reading', 'gaming'] };
const obj2 = deepCloneUsingJSON(obj1);

obj2.address.city = 'LA';
obj2.hobbies[0] = 'traveling';

console.log(obj1.address.city); // 输出 'NY'
console.log(obj2.address.city); // 输出 'LA'
console.log(obj1.hobbies[0]); // 输出 'reading'
console.log(obj2.hobbies[0]); // 输出 'traveling'

3. JSON.stringify 的缺陷

尽管其是一种快速且简单的深克隆方法，但它也有几个明显的缺陷：

1、无法克隆函数：JSON 序列化过程会丢失对象中的函数。例如：

const obj1 = { name: 'John', greet: () => console.log('Hello') };
const obj2 = JSON.parse(JSON.stringify(obj1));
console.log(obj2); // { name: 'John' }
obj2.greet(); // 报错：obj2.greet is not a function

2、无法处理 undefined：对象中的 undefined 值会被丢失，并且会在序列化过程中变成 null。

const obj1 = { value: undefined };
const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2.value);  // 输出: undefined

3、无法处理特殊对象：某些 JavaScript 特殊对象（如 Date、RegExp、Map、Set、Promise 等）无法正确克隆，变成普通的对象或丢失其原有属性。

const obj1 = { date: new Date(), map: new Map() };
const obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); // { date: '2025-01-08T06:39:12.842Z', map: {} }
console.log(obj2.date instanceof Date); // 输出: false
console.log(obj2.map instanceof Map); // 输出: false

4、循环引用无法处理：如果对象包含循环引用（即一个对象的属性引用了它自身），JSON.stringify 会抛出错误。

const obj1 = {};
obj1.self = obj1;

const obj2 = JSON.parse(JSON.stringify(obj1)); 
// 报错：TypeError: Converting circular structure to JSON 无法转换递归结构

4. 深度克隆的缺陷和完善

在实际开发中，基于 JSON.stringify 的深克隆方法需要处理一下。

1、处理 undefined 和 null：在序列化之前，进行预处理，避免 undefined 变成 null，或者在反序列化时进行特殊处理。

2、处理循环引用：为防止循环引用导致的错误，可以使用 WeakMap 来存储已访问的对象，并在遇到已访问的对象时直接返回，避免无限递归。

3、支持 Date、RegExp 等特殊对象：在克隆过程中判断对象的类型，使用 Object.prototype.toString.call() 来判断，进行相应的处理。

5. 更健壮的深克隆代码

// 考虑循环引用
const cache = new WeakMap(); // 确保对象在外层销毁时，Map结构自动销毁，防止内存泄露
const deepClone = (obj) => {
  if (obj === null || typeof obj !== 'object') return obj;
  // obj是对象
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const newObj = Array.isArray(obj) ? [] : {}; // 判断是数组还是对象
  cache.set(obj, newObj);
  // 考虑原型
  if (Object.getPrototypeOf(obj) !== Object.prototype) {
    // newObj.__proto__ = Object.getPrototypeOf(obj);
    // or
    Object.setPrototypeOf(newObj, Object.getPrototypeOf(obj));
  }
  for (let key in obj) {
    // 考虑继承属性
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]); // 递归克隆
    }
  }
  return newObj;
};
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  eat() {
    console.log('eat');
  }
}
Person.prototype.hobby = 'game';
Person.prototype.say = function () {
  console.log('say');
};
const obj = new Person('张三', 18);
// 循环引用
obj.h = obj;
console.log(obj);
console.log(deepClone(obj)); // <ref *1> Person { name: '张三', age: 18, h: [Circular *1] }