14、JavaScript 中箭头函数与类的使用技巧

JavaScript 中箭头函数与类的使用技巧

1. 使用箭头函数避免上下文混淆

在 JavaScript 开发中，作用域（Scope）和上下文（Context）是两个容易让人混淆的概念。简单来说，函数的作用域是指函数可以访问的变量；而上下文则是指函数或类中 this 关键字所指向的对象。Ryan Morr 给出了一个简单的记忆方法：作用域与函数相关，上下文与对象相关。

为了理解上下文，我们从一个简单的对象开始。例如，有一个名为 Validator 的对象，它用于在表单字段上设置无效消息：

const validator = {
    message: 'is invalid.',
    setInvalidMessage(field) {
        return `${field} ${this.message}`;
    },
};
validator.setInvalidMessage('city');
// city is invalid.

在上述代码中， this.message 指向对象的 message 属性。这是因为当方法从对象中调用时，函数会以包含该方法的对象为上下文创建 this 绑定。

然而，当我们尝试将函数作为另一个函数的回调使用时，就会出现上下文问题。例如，使用 map() 方法重构 setInvalidMessage() <