ES6 箭头函数：告别 this 的困扰
引言
ES6 箭头函数（=>）不仅是语法糖，更解决了 JavaScript 中 this 绑定的核心痛点。本文将揭示其四大实战价值，助你写出更简洁可靠的代码。
1. 极简语法：告别 function 冗余
单参数、单表达式时可省略括号和 return：
// 传统写法
const squares = [1, 2, 3].map(function(x) {
return x * x;
});
// 箭头函数
const squares = [1, 2, 3].map(x => x * x); // 代码量减少 40%
2. 词法 this：根治绑定问题
传统函数的 this 由调用者决定，常需 bind() 救场：
function Timer() {
this.seconds = 0;
setInterval(function() {
this.seconds++; // 错误！这里的 this 指向 window
}, 1000);
}
箭头函数继承外层 this，彻底避免陷阱：
setInterval(() => {
this.seconds++; // 正确指向 Timer 实例
}, 1000);
3. 隐式返回：简化回调地狱
适合单行操作的链式调用（如 Promise、Array方法）：
// 传统多层回调
fetch(url)
.then(function(res) {
return res.json()
})
.then(function(data) {
console.log(data);
});
// 箭头函数扁平化
fetch(url)
.then(res => res.json())
.then(data => console.log(data));
4. 避免意外行为：更安全的函数
箭头函数不可作为构造函数（无 prototype 属性），且无 arguments 对象：
const Foo = () => {
};
new Foo(); // TypeError: Foo is not a constructor
// 需获取参数时改用 Rest 参数
const log = (...args) => console.log(args);
结语
箭头函数三大核心优势：
✅ 永远绑定词法作用域的 this
✅ 精简回调代码结构
✅ 避免构造函数误用
