ES6 await在类静态方法中失效？原因及正确使用方法

嘿，我来帮你理清这个问题～

为什么静态函数里await无法生效？ #

核心问题出在**this的指向**上：

• 在类的静态函数中，this指向的是类本身（比如你的MyClass）；
• 而你定义的resolveAfter2Seconds()是一个实例方法——它只属于MyClass的实例对象（也就是new MyClass()创建出来的对象），类本身并没有这个方法。

所以当你在静态asyncCall里调用this.resolveAfter2Seconds()时，会因为找不到这个方法而报错（或者执行异常），自然await就没法正常工作啦。

静态函数中正确使用await的两种方法 #

方法一：把实例方法改为静态方法 #

如果resolveAfter2Seconds不需要依赖实例的状态，直接把它也定义成静态方法，这样类本身就拥有这个方法，静态函数里的this就能正常访问：

class MyClass {
  static resolveAfter2Seconds() { // 改为静态方法
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('resolved');
      }, 2000);
    });
  }

  static async asyncCall() {
    console.log('calling');
    const result = await this.resolveAfter2Seconds();
    console.log(result); // 2秒后输出 'resolved'
  }
}

MyClass.asyncCall();

方法二：在静态函数中实例化类，调用实例方法 #

如果resolveAfter2Seconds必须是实例方法（比如依赖实例的属性或其他实例方法），那就在静态async函数里创建类的实例，通过实例来调用这个方法：

class MyClass {
  resolveAfter2Seconds() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('resolved');
      }, 2000);
    });
  }

  static async asyncCall() {
    console.log('calling');
    const myInstance = new MyClass(); // 创建类的实例
    const result = await myInstance.resolveAfter2Seconds(); // 通过实例调用方法
    console.log(result); // 2秒后输出 'resolved'
  }
}

MyClass.asyncCall();

简单来说，就是要区分清楚类的静态成员和实例成员的访问范围，静态上下文里只能直接访问静态成员，实例成员得通过实例来调用～

内容的提问来源于stack exchange，提问作者John David