ES9 解决在异步函数中调用类中方法的方法

在前端开发中，我们经常会遇到在异步函数中调用类中的方法的情况。在 ES6 中，我们可以使用箭头函数来解决这个问题。但是，当我们需要在一个异步函数中调用多个类中的方法时，这种方式就变得非常繁琐。ES9 提供了一种新的解决方案，可以让我们更加方便地在异步函数中调用类中的方法。

问题

在异步函数中调用类中的方法时，我们通常会遇到一个问题：this 指向不正确。比如，在下面的代码中，我们定义了一个类 Person，并且在其中定义了一个方法 getName。我们还定义了一个异步函数 getPersonName，在其中我们调用了 getName 方法并将结果打印出来。

class Person {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

async function getPersonName() {
  const person = new Person('John Doe');
  const name = await person.getName();
  console.log(name);
}

getPersonName(); // undefined

但是，当我们运行这段代码时，发现打印出来的结果是 undefined，而不是 John Doe。这是因为在异步函数中，this 指向的是全局对象，而不是 Person 类的实例。

解决方案

ES6 中，我们可以使用箭头函数来解决这个问题。箭头函数没有自己的 this，它会捕获外层的 this。因此，在箭头函数中调用类中的方法时，this 指向的就是类的实例。下面是一个使用箭头函数的示例代码：

class Person {
  constructor(name) {
    this.name = name;
  }

  getName = async () => {
    return this.name;
  }
}

async function getPersonName() {
  const person = new Person('John Doe');
  const name = await person.getName();
  console.log(name);
}

getPersonName(); // John Doe

在上面的代码中，我们将 getName 方法定义为箭头函数，这样就可以正确地获取到 Person 类的实例。

但是，当我们需要在一个异步函数中调用多个类中的方法时，使用箭头函数就变得非常繁琐。ES9 提供了一种新的解决方案，可以让我们更加方便地在异步函数中调用类中的方法。

ES9 中，我们可以使用 Object.getOwnPropertyDescriptors 方法来获取类中的方法描述符，并将它们绑定到类的实例上。下面是一个使用 Object.getOwnPropertyDescriptors 方法的示例代码：

class Person {
  constructor(name) {
    this.name = name;
    Object.getOwnPropertyDescriptors(Person.prototype).getName.value.bind(this);
  }

  async getName() {
    return this.name;
  }
}

async function getPersonName() {
  const person = new Person('John Doe');
  const name = await person.getName();
  console.log(name);
}

getPersonName(); // John Doe

在上面的代码中，我们使用 Object.getOwnPropertyDescriptors 方法获取了 Person 类中的所有方法描述符，并将 getName 方法的值绑定到了类的实例上。这样，在异步函数中调用 getName 方法时，this 就会指向类的实例。

学习意义

ES9 中引入的 Object.getOwnPropertyDescriptors 方法，提供了一种更加方便的方式来在异步函数中调用类中的方法。它使得我们不再需要使用箭头函数来解决 this 指向的问题，从而使得代码更加简洁和易读。

总结

在异步函数中调用类中的方法时，我们通常会遇到 this 指向不正确的问题。在 ES6 中，我们可以使用箭头函数来解决这个问题。但是，当我们需要在一个异步函数中调用多个类中的方法时，使用箭头函数就变得非常繁琐。ES9 提供了一种新的解决方案，可以让我们更加方便地在异步函数中调用类中的方法。使用 Object.getOwnPropertyDescriptors 方法，我们可以获取类中的方法描述符，并将它们绑定到类的实例上，从而使得在异步函数中调用类中的方法更加简洁和易读。

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