# JavaScript提升：掌握深拷贝与浅拷贝的技巧及如何手写深拷贝

**引言：**

在JavaScript开发中，对象复制是日常编程中常见的需求。然而，对象的复制有两种不同的类型：浅拷贝与深拷贝。理解这两者的区别和应用场景，并学会手写深拷贝函数，对于提升代码质量和避免潜在的Bug至关重要。本文将深入探讨浅拷贝与深拷贝的概念、差异，并附上详细的JavaScript代码示例，助你掌握这一核心技能。

---

### **一、浅拷贝与深拷贝的概念**

**标题：浅拷贝与深拷贝，究竟有何不同？**

**浅拷贝（Shallow Copy）**：复制对象时，只复制一层对象的属性，若属性为引用类型（如数组、对象），则只会复制引用地址，不会创建新的引用对象。

```javascript

let obj1 = { a: 1, b: { c: 2 } };

let obj2 = Object.assign({}, obj1);

obj2.b.c = 3;

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

```

在上述代码中，`obj2`通过浅拷贝得到了`obj1`的所有属性，但当修改`obj2.b.c`时，`obj1`的属性也被更改，这是因为`obj1.b`和`obj2.b`共享同一块引用类型的内存区域。

**深拷贝（Deep Copy）**：复制对象时，不仅复制一层属性，还递归复制所有层级的引用类型属性，生成全新的对象。

```javascript

let obj1 = { a: 1, b: { c: 2 } };

let obj3 = deepClone(obj1);

obj3.b.c = 3;

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

```

在深拷贝的例子中，当修改`obj3.b.c`时，`obj1`的属性不受影响，说明深拷贝生成了一个与原对象完全独立的新对象。

---

### **二、手写深拷贝函数**

**标题：一步步实现深拷贝**

实现深拷贝的方式有很多种，这里以JSON.parse与JSON.stringify方法为基础，创建一个简单实用的深拷贝函数：

```javascript

function deepClone(obj, hash = new WeakMap()) {

// 对象不是object或者null，直接返回

if (obj == null || typeof obj !== 'object') return obj;

// 若hash中有缓存，则直接返回缓存对象

if (hash.has(obj)) return hash.get(obj);

// 根据对象类型分别处理

let cloneObj;

if (Array.isArray(obj)) {

cloneObj = obj.slice();

} else {

cloneObj = Object.create(Object.getPrototypeOf(obj));

hash.set(obj, cloneObj);

}

// 递归遍历对象属性，执行深拷贝

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

cloneObj[key] = deepClone(obj[key], hash);

}

}

return cloneObj;

}

let obj1 = { a: 1, b: { c: 2 } };

let obj4 = deepClone(obj1);

obj4.b.c = 3;

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

```

需要注意的是，上述深拷贝函数并不能完美处理循环引用的对象，也无法处理函数、日期、正则等特殊类型。针对这些问题，可以采用其他方法如递归+ES6 Proxy、lodash库的_.cloneDeep方法等实现更为完善的深拷贝。

---

### **三、实战应用场景**

**标题：深拷贝在实际项目中的应用**

- **数据持久化**：在存储用户状态或应用程序状态时，避免直接操作原始数据，可通过深拷贝创建临时副本进行操作，再决定是否更新原始数据。

- **组件间通信**：在React等框架中，父组件向子组件传递复杂状态时，为避免相互干扰，可先进行深拷贝。

- **克隆对象**：在进行某些需要重复利用对象的操作时，深拷贝可以确保每次操作都在全新的对象上进行。

---

**结语：**

深拷贝与浅拷贝是JavaScript开发中的基础而又重要的知识，理解它们的原理并在实际场景中正确应用，能有效防止对象属性被意外修改，提升代码健壮性。通过本文的学习，你不仅掌握了深拷贝的概念，还亲手实现了深拷贝函数，相信在未来的开发过程中，你会更加自如地运用这一技术，提升开发效率与产品质量。不断深入理解JavaScript的底层机制，才能更好地驾驭这门语言，编写出高质量的代码。