Promise 中的 this 陷阱

Promise 中的 this 陷阱

在 JavaScript 中，Promise 是一种非常方便的异步编程模式，它可以让我们更加优雅地处理异步操作。然而，当我们在编写 Promise 代码时，经常会遇到一个 this 的陷阱，这个陷阱可能会导致代码逻辑出错，甚至是程序崩溃。

Promise 中的 this 陷阱是由于 JavaScript 中 this 的绑定机制导致的。在 Promise 中，this 的指向可能会发生变化，这取决于 Promise 回调函数的执行环境。下面让我们来看一下具体的示例代码。

示例代码：

// javascriptcn.com 代码示例
class MyClass {
  constructor() {
    this.name = 'MyClass';
  }

  async asyncMethod() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(this.name);
        resolve();
      }, 1000);
    });
  }

  async callAsyncMethod() {
    await this.asyncMethod();
  }
}

const myClass = new MyClass();
myClass.callAsyncMethod();

这段代码中，我们定义了一个 MyClass 类，它有一个 asyncMethod 方法，这个方法返回一个 Promise 对象。在 asyncMethod 中，我们使用了 setTimeout 来模拟一个异步操作，并在回调函数中打印了 this.name 的值。接着，我们定义了一个 callAsyncMethod 方法，它调用了 asyncMethod 方法。

在这段代码中，我们期望打印出 Myclass，但实际上，我们会看到 undefined。这是因为在 Promise 的回调函数中，this 的指向已经发生了变化，不再指向 MyClass 的实例。这时候，我们需要用一些技巧来解决这个问题。

解决方案：

一种解决方案是使用箭头函数。箭头函数不会改变 this 的指向，它会继承外层函数的 this。因此，我们可以将 asyncMethod 中的回调函数改为箭头函数，这样就可以正确地打印出 Myclass 了。

修改后的代码：

// javascriptcn.com 代码示例
class MyClass {
  constructor() {
    this.name = 'MyClass';
  }

  async asyncMethod() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(this.name);
        resolve();
      }, 1000);
    });
  }

  async callAsyncMethod() {
    await this.asyncMethod();
  }
}

const myClass = new MyClass();
myClass.callAsyncMethod();

另一种解决方案是使用 bind 方法。bind 方法可以改变函数的 this 指向，我们可以在 Promise 回调函数中使用 bind 方法来将 this 指向 MyClass 的实例。

修改后的代码：

// javascriptcn.com 代码示例
class MyClass {
  constructor() {
    this.name = 'MyClass';
  }

  async asyncMethod() {
    return new Promise((resolve, reject) => {
      setTimeout(function() {
        console.log(this.name);
        resolve();
      }.bind(this), 1000);
    });
  }

  async callAsyncMethod() {
    await this.asyncMethod();
  }
}

const myClass = new MyClass();
myClass.callAsyncMethod();

总结：

在 Promise 中，this 的指向可能会发生变化，因此在编写 Promise 代码时，我们需要格外小心。我们可以使用箭头函数或者 bind 方法来解决这个问题。不管是哪种解决方案，都可以避免 this 陷阱带来的问题，并让我们的代码更加健壮和可靠。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6550b087d2f5e1655da852b6