JavaScript的内存结构你搞懂了吗？栈和堆有啥区别？

当你在控制台写下let a = 42时，这个简单的赋值操作背后正在上演着一场精彩的内存双城记。JavaScript引擎用栈（Stack）和堆（Heap）这两个截然不同的内存空间，编织出了现代Web开发的底层运行逻辑。理解这对黄金搭档的工作机制，就像获得了一把打开高性能JavaScript编程大门的密钥。

栈堆内存示意图

栈内存就像瑞士钟表匠打造的精密仪器，它遵循着严格的LIFO（后进先出）规则。当声明基本类型变量时：


function calculate() {
  let base = 100;    // 入栈
  let ratio = 1.2;   // 入栈
  return base  ratio; 
}                    // 函数执行完毕，变量出栈

此时内存栈会像叠盘子一样将变量依次压入，每个变量占据固定大小的内存空间。当函数执行完毕，这些变量又会像退潮般自动清除，整个过程高效得令人惊叹。

堆内存则是梵高式的艺术创作空间，这里存储着对象、数组等引用类型：


let user = {         // 对象存储在堆
  name: "李华",
  age: 28,
  preferences: ["篮球", "编程"]
};
let ref = user;      // 复制的是内存地址

堆内存允许动态分配大小不一的内存块，这些内存块的生命周期不再受制于函数的执行上下文。但也正因这种自由，需要垃圾回收机制这个”保洁阿姨”定期清理不再使用的内存。

特征	栈内存	堆内存
存储内容	基本类型值	引用类型值
访问方式	直接访问	指针间接访问
内存分配	静态预分配	动态分配
生命周期	随上下文销毁	依赖GC回收

当修改栈变量时，相当于在记事本上直接改写数字：


let x = 10;
x = 20;  // 直接在原内存位置修改值

而操作堆对象时，就像通过GPS坐标找到仓库再装卸货物：


let obj = { count: 1 };
obj.count = 2;  // 通过地址找到堆内存修改

当函数闭包捕获外部变量时，会打破栈内存的生命周期规则：


function createCounter() {
  let count = 0;          // 本应存在于栈
  return () => {
    console.log(++count); // 闭包使count逃逸到堆
  };
}

此时引擎会将count变量装箱（Boxing）转移到堆内存，形成特殊的闭包作用域，这就是函数式编程的内存代价。

⚠️ 未清理的定时器：setInterval(() => {...}, 1000)
⚠️ DOM引用残留：const elements = document.querySelectorAll('.item')
⚠️ 全局变量滥用：function saveData() { cache = [...] }

对象池技术：复用对象而非重复创建
分时函数：将耗时操作拆分为多个任务帧
避免内存抖动：不要在循环中频繁创建对象


// 优化前
function processItems(items) {
  items.forEach(item => {
    const temp = {};  // 每次循环创建新对象
    // 处理逻辑
  });
}

// 优化后
function processItems(items) {
  const temp = {};    // 复用对象
  items.forEach(item => {
    // 复用temp处理逻辑
  });
}

在Chrome DevTools的Memory面板中，你可以看到：