JavaScript 深拷贝与内存管理：栈与堆的完整解析
在 JavaScript 开发中，理解内存模型是掌握数据行为、避免常见陷阱（如意外修改共享对象）和优化性能的基础。JavaScript 的内存主要分为两类：栈内存（Stack） 和 堆内存（Heap） ，它们分别用于存储不同类型的数据，并决定了变量如何被赋值、传递和回收。
一、栈内存 vs 堆内存
栈内存：快速、有序、有限
栈用于存储基本类型（primitive types） ，包括：
number、string、booleannull、undefinedsymbol（ES6）、bigint（ES2020）
这些类型的值大小固定，直接存放在栈帧中。函数调用时创建栈帧，执行完毕后自动释放。
特点：
- 内存连续，访问极快；
- 遵循后进先出（LIFO）原则；
- 空间有限，不适合大对象；
- 赋值时进行值拷贝，彼此独立。
let a = 10;
let b = a; // 值拷贝
b = 20;
console.log(a); // 10，不受影响
堆内存：灵活、动态、开销大
堆用于存储引用类型（objects） ，如：
- 对象
{}、数组[] - 函数、
Date、RegExp Map、Set、Promise等
由于这些结构大小不固定且可能动态增长（如 users.push()），JavaScript 将其存于堆中，而栈中仅保存指向堆的引用地址。
特点：
- 内存非连续，需通过指针访问；
- 支持动态伸缩，适合复杂数据；
- 由垃圾回收器（GC）自动管理生命周期；
- 赋值时复制的是引用，多个变量可能共享同一对象。
const users = [{ name: "张三" }];
const data = users; // 引用拷贝
data[0].name = "李四";
console.log(users[0].name); // "李四" —— 因共享堆内存
逻辑内存模型：
栈内存（Stack） 堆内存（Heap）
┌─────────────┐ ┌───────────────────────┐
│ users ──────┼─────────────▶│ { name: "张三" } │
├─────────────┤ └───────────────────────┘
│ data ───────┼─────────────▶ (同一地址)
└─────────────┘
二、浅拷贝的问题
当我们将一个对象赋值给另一个变量时，只是复制了引用，而非实际数据。这种行为称为浅拷贝，会导致“意外交互”：
const users = [{ id: 1, name: "张三" }];
const data = users;
data[0].hobbies = ["唱", "跳", "rap"];
console.log(users[0].hobbies); // ["唱", "跳", "rap"] —— 被意外修改！
这是因为 users 和 data 指向堆中同一个对象。
三、深拷贝：真正独立的副本
要实现完全隔离的复制，必须进行深拷贝——在堆中申请全新空间，递归复制所有层级的数据。
1. JSON 序列化（适用于简单数据）
const data = JSON.parse(JSON.stringify(users));
优点：代码简洁，适合纯数据对象。
缺点：
- 无法处理
function、undefined、Symbol； - 忽略原型链；
- 不能正确序列化
Date、RegExp、Map、Set； - 遇到循环引用会报错。
2. 手动递归实现（可控性强）
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof Array) return obj.map(item => deepClone(item));
if (obj instanceof Object) {
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key]);
}
}
return cloned;
}
}
可扩展支持更多类型，但需额外处理循环引用（可用 WeakMap 跟踪已拷贝对象）。
3. 第三方库（生产推荐）
- Lodash：
_.cloneDeep(obj) - Immer：基于不可变更新，间接避免深拷贝需求
这些方案经过充分测试，能安全处理复杂场景。
四、内存与性能考量
-
深拷贝开销大：每次都会在堆中分配新内存，对大型对象或高频操作可能引发性能瓶颈。
-
垃圾回收压力：大量临时深拷贝对象会增加 GC 负担，可能导致页面卡顿。
-
替代策略：
- 使用不可变数据模式（如 Redux 推荐的 immutable update）；
- 采用结构共享（如 Immutable.js）减少内存占用；
- 在确实需要隔离时才使用深拷贝，避免过度使用。
总结
- 栈内存：存基本类型，值拷贝，高效安全；
- 堆内存：存对象，引用共享，灵活但需谨慎；
- 浅拷贝 ≠ 独立副本，修改会相互影响；
- 深拷贝是解决共享问题的有效手段，但需权衡性能与适用场景；
- 理解内存模型，是写出健壮、高效 JavaScript 代码的前提。