如何在回调中访问正确的“this”？

当在JavaScript中使用回调时，经常会出现访问不到正确的“this”的问题。这可能会导致一些不必要的麻烦。本文将向您介绍在回调中访问正确的“this”的几种方法。

使用箭头函数

使用箭头函数是一种解决此问题的典型方法。箭头函数没有自己的“this”绑定，它会自动将“this”从外部函数（即包含箭头函数的函数）继承过来。

下面是一个例子：

class MyClass {
  constructor() {
    this.value = 'Hello, World!';
  }

  async myAsyncMethod() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(this.value);
      }, 1000);
    });
  }
}

(async () => {
  const instance = new MyClass();
  console.log(await instance.myAsyncMethod());
})();

在上述代码中，箭头函数自动将“this”继承（来自“myAsyncMethod”），因此正常工作。

使用Function.prototype.bind

您可以使用Function.prototype.bind（）方法在回调中访问正确的“this”。bind（）方法将函数绑定到指定的上下文中，以便您在回调中使用正确的“this”。

下面是一个例子：

class MyClass {
  constructor() {
    this.value = 'Hello, World!';
  }

  async myAsyncMethod() {
    const callback = (function() {
      console.log(this.value);
    }).bind(this);

    return new Promise((resolve) => {
      setTimeout(() => {
        callback();
        resolve();
      }, 1000);
    });
  }
}

(async () => {
  const instance = new MyClass();
  await instance.myAsyncMethod();
})();

在上述代码中，我们通过调用“bind”方法将回调函数绑定到类的实例上下文中，然后在回调中使用正确的“this”。

使用箭头函数和展开运算符

您也可以使用箭头函数和“展开”运算符（即“...”运算符）来访问正确的“this”。展开运算符可以将一个数组展开为单独的参数。

下面是一个例子：

class MyClass {
  constructor() {
    this.value = 'Hello, World!';
  }

  async myAsyncMethod() {
    const callback = (...args) => {
      console.log(this.value, args);
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        callback('foo', 'bar');
        resolve();
      }, 1000);
    });
  }
}

(async () => {
  const instance = new MyClass();
  await instance.myAsyncMethod();
})();

在上述代码中，我们使用箭头函数和展开运算符将回调函数绑定到正确的“this”上，并将参数“foo”和“bar”传递给回调。