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']

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required