在回调函数中如何正确访问 `this`？

javascript

2024-03-13 03:28:00

在回调中正确访问 this 的指南

问题概述

在 JavaScript 中，this 的行为在回调函数中可能令人困惑。当一个函数作为参数传递给另一个函数时，它可能无法访问我们期望的 this 值。这会导致意外的行为和错误。

解决方案

有几种方法可以解决此问题并访问回调函数中正确的 this：

1. 箭头函数

箭头函数（=>）会继承其外层作用域的 this 值。这意味着我们可以使用箭头函数创建回调函数，该回调函数将引用正确的 this：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => {
        alert(this.data);
    });
}

2. bind() 方法

bind() 方法可以创建函数的新实例，该实例将使用指定的 this 值。我们可以使用 bind() 来创建事件处理程序，该事件处理程序将引用正确的 this：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert.bind(this));
}

MyConstructor.prototype.alert = function() {
    alert(this.data);
};

3. 全局变量

在某些情况下，可以使用全局变量来保存对象的引用，然后在回调函数中使用它。但是，这不推荐，因为它可能会导致意外行为和维护问题：

var myConstructor;

function MyConstructor(data, transport) {
    myConstructor = this;
    transport.on('data', function () {
        alert(myConstructor.data);
    });
}