14、JavaScript 中箭头函数与类的使用指南

JavaScript 中箭头函数与类的使用指南

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

在 JavaScript 开发中，作用域（scope）和上下文（context）是两个容易让人混淆的概念。简单来说，函数的作用域指的是函数能够访问的变量，而上下文则是指关键字 this 在函数或类中所指向的对象。

为了更好地理解上下文，我们先来看一个简单的对象示例：

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

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

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

const validator = {
    message: 'is inva