1. 捕获 this 上下文
箭头函数最常用的一个场景是避免 this 绑定问题。在普通函数中,this 的值会根据调用方式而变化,而箭头函数会捕获其所在上下文的 this。
class Person {
constructor(name) {
this.name = name;
}
printNameWithDelay() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
}
const person = new Person('John');
person.printNameWithDelay(); // 1秒后输出 'John'
在上面的代码中,如果使用普通函数,this 会在 setTimeout 的回调函数中指向全局对象(在严格模式下是 undefined),而箭头函数则保持了 this 指向 Person 实例。
2. 简化回调函数
箭头函数可以简化回调函数的书写,使代码更加简洁。
const numbers = [1, 2, 3, 4, 5];
// 普通函数写法
const squares = numbers.map(function (number) {
return number * number;
});
// 箭头函数写法
const squaresArrow = numbers.map(number => number * number);
console.log(squaresArrow); // [1, 4, 9, 16, 25]
3. 处理数组的高阶函数
箭头函数在处理数组的高阶函数时非常方便。
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Carol', age: 35 }
];
// 使用箭头函数
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Carol']