如何理解javascript的作用域与闭包【教程】

JavaScript作用域决定变量可见范围，闭包是函数与其词法环境的组合体；var具函数作用域并提升，let/const提供块级作用域；闭包导致变量延迟回收，调试需查看[[Scopes]]面板。

JavaScript 的作用域和闭包不是概念游戏，而是你每天写代码时真实影响变量能否访问、函数能否复用、内存会不会泄漏的关键机制。理解它们不是为了背定义，而是为了解决 undefined、ReferenceError、回调里取不到最新值、定时器捕获旧变量这些具体问题。

函数作用域决定变量“活在哪”

ES5 及之前只有函数作用域（function 创建新作用域），var 声明的变量会被提升且在整块函数内可见；ES6 引入 let 和 const，带来块级作用域（{} 内有效）。

• var 在 if 或 for 里声明，仍可在整个函数中访问；let 则严格限制在块内
• 函数内部未用 var/let/const 声明直接赋值的变量，会变*局变量（严格模式下报错）
• 嵌套函数能访问外层函数的变量，但外层不能访问内层变量——这是作用域链的单向性

闭包是“函数 + 它创建时的作用域环境”的组合体

闭包不是特殊语法，而是一个自然结果：当一个函数被返回或传到别处执行，它仍保留对其定义时所在词法作用域的引用。只要这个函数还存在，它“捕获”的变量就不会被垃圾回收。

• 常见闭包场景：setTimeout 回调、事件监听器、模块私有变量封装（如 IIFE）、防抖节流函数
• 典型陷阱：循环中用 var 声明计数器并创建异步函数，所有回调共享同一个 i，最终输出全是

  

  循环结束后的值
• 修复方式：用 let（块级绑定）、自执行函数传参、或用 for...of 配合解构

调试闭包：看 [[Scopes]] 而不是猜

Chrome DevTools 的 “Scope” 面板里能看到函数运行时的 [[Scopes]]，里面明确列出 Closure、Local、Script 等层级。这不是抽象概念，而是真实可查的数据结构。

• 右键断点处的函数 → “Reveal in Scope Chain” 可快速定位它捕获了哪些变量
• 如果发现某个本该释放的变量一直挂在 Closure 下，大概率是闭包意外持有了 DOM 引用或大对象
• console.dir(fn) 在控制台展开也能看到 [[Scopes]] 属性（需开启“Show function headers”）

闭包真正的复杂点不在“怎么形成”，而在“什么时候该释放”。很多内存泄漏不是因为用了闭包，而是忘了它会让变量生命周期超出预期——比如给大量元素绑事件时，每个 handler 都闭包了当前元素或索引，却没在销毁时清理引用。