JavaScript 深拷贝实现：手写代码示例

本文提供了一个手写的 JavaScript 深拷贝函数 deepClone，用于创建对象的完整副本，避免原始对象被修改。代码简洁易懂，并附带详细解释，帮助你理解深拷贝的原理。

function deepClone(source) {
  if (source === null) return null
  if (typeof source !== 'object') return source

  let target = Array.isArray(source) ? [] : {}
  for (let key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (typeof source[key] === 'object') {
        target[key] = deepClone(source[key])
      } else {
        target[key] = source[key]
      }  
    }
  }
  return target
}

代码解释：

判断输入类型： 首先判断输入 source 是否为空或非对象类型，如果是则直接返回。
创建目标对象： 根据输入类型创建目标对象 target：如果是数组，则创建空数组；如果是对象，则创建空对象。
遍历源对象： 使用 for...in 循环遍历源对象的属性，并使用 hasOwnProperty 检查该属性是否为源对象自身属性，避免遍历原型链上的属性。
递归拷贝： 如果属性的值是对象类型，则递归调用 deepClone 函数创建该属性的深拷贝，并赋值给目标对象。
直接赋值： 如果属性的值不是对象类型，则直接将属性值赋值给目标对象。
返回目标对象： 最后返回创建的 target 对象。

使用示例：

const obj = { a: 1, b: { c: 2, d: 3 } };
const clonedObj = deepClone(obj);

console.log(clonedObj); // { a: 1, b: { c: 2, d: 3 } }

clonedObj.b.c = 4;

console.log(obj); // { a: 1, b: { c: 2, d: 3 } }
console.log(clonedObj); // { a: 1, b: { c: 4, d: 3 } }

说明：

以上代码实现了简单的深拷贝，对于循环引用、函数等特殊情况可能无法完全处理。
实际开发中，可以使用现有的库（如 Lodash）或库函数（如 JSON.parse(JSON.stringify(obj))）进行深拷贝。

希望本文能帮助你理解 JavaScript 深拷贝的原理和实现方法。如果你有任何问题，欢迎留言讨论。