如何克隆javascript ES6类实例

克隆JavaScript ES6类实例可以通过多种方式实现，具体方法取决于你希望进行的是浅克隆还是深克隆。

基础概念

浅克隆：只复制对象的第一层属性，如果属性值是对象，则复制的是引用，而不是实际的对象。
深克隆：复制对象的所有层级，包括嵌套的对象和数组，创建一个全新的对象。

类型

浅克隆
- 使用Object.assign()方法。
- 使用展开运算符...。

深克隆
- 使用JSON方法（JSON.parse(JSON.stringify(obj))），但这种方法有局限性，比如不能复制函数、undefined、循环引用等。
- 使用递归函数实现深克隆。

应用场景

当你需要在不改变原始对象的情况下操作数据时。
当你需要将对象传递给其他函数或模块，而又不希望影响原始对象时。

示例代码

浅克隆

class Example {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.details = { city: 'New York' };
  }
}

const original = new Example('Alice', 30);
const shallowClone = Object.assign({}, original);

// 修改克隆对象的属性
shallowClone.name = 'Bob';
shallowClone.details.city = 'Los Angeles';

console.log(original.name); // Alice
console.log(shallowClone.name); // Bob
console.log(original.details.city); // Los Angeles (因为是浅克隆，所以原始对象的details也被修改了)

深克隆

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

const original = new Example('Alice', 30);
const deepClone = deepClone(original);

// 修改克隆对象的属性
deepClone.name = 'Bob';
deepClone.details.city = 'Los Angeles';

console.log(original.name); // Alice
console.log(deepClone.name); // Bob
console.log(original.details.city); // New York (因为是深克隆，所以原始对象的details没有被修改)

遇到的问题及解决方法

问题：使用JSON方法进行深克隆时，无法复制函数、undefined、循环引用等。

原因：JSON.stringify()方法在序列化对象时会忽略函数和undefined值，同时如果对象中存在循环引用，会导致序列化失败。

解决方法：使用递归函数实现深克隆，可以处理函数、undefined和循环引用的情况。

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj); // 处理循环引用
  const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }
  return clone;
}