JavaScript异步回调访问外部作用域的核心问题是变量绑定时机与执行时机不一致：var循环共享i导致全输出5；闭包捕获对象引用而非快照；未清理定时器/事件监听器致内存泄漏；React中state被捕获过期。
JavaScript 异步回调中访问外部作用域，最常出问题的不是“能不能访问”，而是“访问到的是哪个时刻的值”。闭包本身没问题，问题出在变量绑定时机和执行时机不一致。
循环中用 var 声明导致所有回调共享同一变量
这是最典型也最容易复现的陷阱。for 循环用 var 声明计数器，所有异步回调都捕获同一个 i 变量，等回调真正执行时，循环早已结束，i 已变成终值。
- 错误写法：
for (var i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); }→ 全部输出 5 - 推荐修复：改用 let，每次迭代创建独立绑定：
for (let i = 0; i < 5; i++) { setTimeout(() => console.log(i), 100); } - 替代方案：显式传参，把当前值作为参数注入回调：
setTimeout(console.log, 100, i)或setTimeout((idx) => console.log(idx), 100, i)
异步回调中引用可变对象（如 config、data）
闭包捕获的是对象引用，不是快照。如果主线程在异步任务发起后立刻修改了该对象属性，回调执行时读到的就是被改过的最新状态。
- 例如：
let config = { url: '/api/1' }; fetchData(config); config.url = '/api/2';→ 回调里config.url很可能已是 '/api/2' - 关键动作：在发起异步前提取必要字段，比如
const savedUrl = config.url;，后续回调只用savedUrl - 进阶做法：对配置类数据，优先使用不可变方式——结构化克隆（
structuredClone(config)）、或仅传 plain object 字面量
事件监听与定时器未清理引发内存泄漏
闭包长期持有 DOM 节点、大型数据或组件实例，而对应的异步任务（如 setInterval）又没清除，就会阻止垃圾回收。
立即学习“Java免费学习笔记（深入）”；
- 典型风险场景：
setInterval(() => render(canvas, bigData), 1000);—— 若 canvas 被移除或组件卸载，但 interval 还在跑，bigData 和 canvas 就一直占着内存 - 必须做：保存定时器 ID，退出前调用
clearInterval；绑定事件监听器后，对应位置要调用removeEventListener - 现代推荐：用 AbortController 控制 fetch 等请求生命周期，统一中止相关异步操作
React 等框架中状态值被捕获过期
在函数组件中，事件处理或定时器里的回调会捕获定义时的 state 快照，而非执行时的最新值。
- 常见表现：
setTimeout(() => setCount(count + 1), 1000)→ 总是基于点击瞬间的 count 加 1，多次快速点击会丢失中间更新 - 解法一：用函数式更新，让 React 提供最新值：
setCount(c => c + 1) - 解法二：用 useRef 同步保存最新 state，在回调中读取 ref.current
- 解法三：配合 useEffect 监听 state 变化，触发时再执行逻辑，避免手动维护闭包上下文
