箭头函数继承外层this解决上下文丢失，闭包捕获外层变量确保稳定访问；前者适用于事件监听、Promise等异步回调，后者常用于节流防抖、私有状态封装；需规避var循环陷阱与内存泄漏风险。
在回调函数中安全访问外层作用域，核心是避免 this 丢失和变量捕获错误。JavaScript 提供两种主流、可靠的方式：箭头函数和闭包，它们分别解决不同维度的问题。
用箭头函数继承外层 this
普通函数在回调中执行时，this 会脱离原始对象上下文（比如变成 undefined 或 window），而箭头函数不绑定自己的 this，而是沿词法作用域向上查找，直接使用定义时所在环境的 this。
- 适用于事件监听、定时器、Promise.then、数组方法（map/filter）等异步或高阶函数回调
- 写法简洁，无需
.bind(this)或临时变量缓存 - 不能用作构造函数，也不适合需要动态
this的场景（如对象方法）
示例：
setTimeout(() => console.log(this.name), 100); // 正确：this 指向外层对象document.addEventListener('click', () => this.handleClick()); // this 仍有效
用闭包捕获外层变量
当需要在回调中稳定访问外层函数的局部变量（如循环中的索引、配置参数、计数器等），闭包是最自然的机制——内部函数“记住”了它定义时的词法环境。
立即学习“Java免费学习笔记（深入）”；
- 关键条件：内层函数引用了外层函数的变量，且该内层函数被返回或传递到外层作用域之外执行
- 变量不会因外层函数执行完毕而销毁，生命周期由闭包维持
- 常用于节流/防抖、私有状态封装、柯里化、事件处理器中保存上下文
示例：
function createTimer(delay) {const start = Date.now();
return () => console.log('elapsed:', Date.now() - start);
}
const timer = createTimer(1000);
setTimeout(timer, 2000); // 输出约 2000，start 被闭包保留
避免常见陷阱
不是所有嵌套函数都构成有效闭包，也不是所有回调都适合用箭头函数。
- for 循环中直接用
var声明变量 + 普通函数回调，会导致所有回调共享同一个变量值；改用let或闭包封装可解决 - 箭头函数无法通过
call/apply改变this，若回调需被显式绑定上下文，应选普通函数 - 闭包长期持有变量可能引发内存泄漏，尤其在 DOM 元素监听器未清理时；及时解绑或置空引用可缓解
