JavaScript 内存探秘：栈与堆的奇幻之旅

大家好！今天我们要深入探讨JavaScript中一个既基础又核心的概念------内存栈（Stack）和内存堆（Heap）。这不仅是面试常考题，更是理解JavaScript运行机制的关键！

从const说起：ES6带来的新变化

在ES5时代，JavaScript没有专门的常量声明方式，开发者只能用var定义所有变量。ES6引入了const，为我们提供了真正的常量声明能力。

javascript 复制代码

const PI = 3.1415926;
// PI = 3.14; // TypeError: Assignment to constant variable

对于简单数据类型（Number、String、Boolean等），const声明的值确实不可改变。但对象（复杂数据类型）呢？

javascript 复制代码

const person = { name: '小明' };
person.name = '小红'; // 这是允许的！
// person = {}; // 这才是会报错的

这看似矛盾的行为，其实正是理解内存栈和堆的关键所在！

内存栈：闪电般的速度

想象内存栈就像一摞整齐的盘子：

连续存储：每个盘子（数据）紧密排列
快速访问：拿取最上面的盘子（LIFO原则）非常快
空间有限：就像厨房柜台空间有限

javascript 复制代码

let a = 10; // 简单类型，值直接存在栈中
let b = a;  // 创建副本
b = 20;
console.log(a); // 仍然是10

对于简单数据类型，JavaScript直接在栈中存储值本身，赋值时创建的是值的副本。

内存堆：自由的大仓库

相比之下，内存堆更像一个大型仓库：

非连续存储：物品可以随意摆放
空间更大：能容纳更大的对象
访问稍慢：需要"寻址"才能找到物品

javascript 复制代码

const obj1 = { value: 10 }; // 对象存储在堆中
const obj2 = obj1;          // 复制的是引用地址
obj2.value = 20;
console.log(obj1.value); // 输出20！

复杂数据类型实际存储在堆中，栈中只保存指向堆内存的地址引用。这就是为什么修改obj2会影响obj1------它们指向同一个堆内存地址！

const的真相：保护的是引用

回到开头的const问题：

对于简单类型，const保护的是栈中的值
对于对象，const保护的是栈中的引用地址（指针），而堆中的内容可以改变

javascript 复制代码

const arr = [1, 2, 3];
arr.push(4); // 允许
// arr = [1,2,3,4]; // 不允许

这就像你家的地址不能变（const），但家里的家具可以随意调整！

为什么需要两种存储方式？

性能考量：栈操作更快，适合频繁访问的小数据
内存管理：栈自动管理（随函数调用创建/销毁），堆需要垃圾回收
数据特性：简单类型大小固定，复杂类型大小可变

实战中的内存问题

1. 意外的全局变量

javascript 复制代码

function leak() {
    secret = '这是一个秘密'; // 没有var/let/const，成为全局变量！
}

var声明的变量会挂载到window对象上，污染全局命名空间。而let和const则不会：

javascript 复制代码

var a = 1;
let b = 2;
console.log(window.a); // 1
console.log(window.b); // undefined

2. 闭包的内存管理

javascript 复制代码

function createHeavyClosure() {
    const bigData = new Array(1000000).fill('大数据');
    return function() {
        console.log(bigData.length);
    };
}
// 即使外部函数执行完毕，bigData仍被闭包引用，无法释放

3. 循环引用问题

javascript 复制代码

let objA = { name: 'A' };
let objB = { name: 'B' };
objA.ref = objB;
objB.ref = objA;
// 即使不再需要，垃圾回收器也无法清除它们

性能优化小贴士

尽量使用局部变量：函数执行完栈自动清理
避免内存泄漏：及时解除不再需要的引用
合理使用对象池：对频繁创建销毁的对象进行复用
注意事件监听器：移除不再需要的事件监听

现代JavaScript的内存管理

随着V8引擎的优化，JavaScript的内存管理越来越智能：

分代垃圾回收：新生代（频繁回收）、老生代（较少回收）
增量标记：避免长时间停顿
空闲时回收：利用浏览器空闲时间进行垃圾回收

总结

理解JavaScript的内存栈和堆机制，能帮助我们：

更合理地使用const和let
避免常见的内存泄漏问题
编写更高性能的代码
更好地调试内存相关问题

记住这个简单比喻：栈像快餐店------快速服务但座位有限；堆像大型餐厅------容量大但需要服务员引导。

希望这篇笔记能帮你更深入地理解JavaScript的内存机制！如果有任何问题，欢迎在评论区讨论~