16、JavaScript 中的上下文问题解决与异步数据获取

JavaScript 中的上下文问题解决与异步数据获取

1. 用 bind() 解决上下文问题

在 JavaScript 编程中，上下文问题是一个常见的挑战，特别是在使用 this 关键字时。函数创建新上下文可能会导致意外结果，尤其是在回调或数组方法中使用 this 时，这种问题在类中也依然存在。

1.1 上下文问题示例

以一个验证器为例，最初它是一个对象字面量，现在将其转换为类：

class Validator {
    constructor() {
        this.message = 'is invalid.';
    }
    setInvalidMessage(field) {
        return `${field} ${this.message}`;
    }
    setInvalidMessages(...fields) {
        return fields.map(this.setInvalidMessage);
    }
}

当调用 setInvalidMessages() 时， map() 方法调用 setInvalidMessage() 会创建一个新的 this 绑定，导致上下文问题，可能会出现 TypeError: Cannot read property 'message' of undef