ES6箭头函数通过词法作用域绑定this，天然解决回调中this丢失问题；它无自有this，继承外层定义时的this，适用于事件、定时器、Promise等场景，但不可作为构造函数或需动态this的场合使用。
ES6箭头函数通过**词法作用域绑定 this**，天然解决传统回调中 this 指向丢失的问题，同时让代码更简洁。
箭头函数自动继承外层 this
普通函数的 this 取决于调用方式，而箭头函数没有自己的 this，它会沿作用域链向上查找，使用定义时所在上下文的 this。这在事件处理、定时器、Promise 回调等场景特别有用。
- 传统写法中，常需用 bind(this)、var self = this 或 闭包保存 this 来维持上下文
- 箭头函数无需额外操作，直接访问外层 this，逻辑更直观
常见回调场景对比示例
以 Vue 或普通类方法中的 setTimeout 和 Promise 为例：
普通函数写法（this 易丢失）：class Counter {
constructor() {
this.count = 0;
}
start() {
setTimeout(function() {
console.log(this.count); // undefined —— this 指向 window 或 undefined（严格模式）
}, 100);
}
}
箭头函数写法（this 正确绑定）：
class Counter {
constructor() {
this.count = 0;
}
start() {
setTimeout(() => {
console.log(this.count); // 0 —— this 指向当前实例
}, 100);
}
}
适用场景与注意事项
箭头函数适合用于**非构造函数、不依赖动态 this 的回调**，但不是万能替代：
立即学习“Java免费学习笔记（深入）”；
- ✅ 适用于：事件监听器、定时器、Promise.then/catch、数组遍历方法（map/filter）中的回调
- ❌ 不适用：需要动态 this 的场景（如对象方法、addEventListener 中需 this 指向触发元素）、构造函数、需要 arguments 的函数
- ⚠️ 注意：箭头函数没有 arguments，可用剩余参数 ...args 替代；也不能用 new 调用
嵌套回调与链式调用更清晰
在 Promise 链或 async/await 中，箭头函数减少冗余声明，保持上下文一致：
getData()
.then(res => {
this.data = res; // this 仍指向组件实例
return processData(res);
})
.then(result => this.handleResult(result)) // 直接调用实例方法
.catch(err => this.handleError(err));
相比 function() 写法，省去反复绑定 this 的步骤，可读性和维护性明显提升。
