如何在JavaScript的Promise匿名回调中正确调用类的其他方法

问题本质 #

你的报错核心是类方法的this绑定丢失：当你把类方法从实例上单独提取出来赋值给变量、或是在普通函数形式的then回调中调用类方法时，方法内部的this不会再指向MyClass的实例，严格模式下甚至为undefined，自然无法调用其他类方法。

最优解决方案（按推荐优先级排序） #

1. 用async/await替换回调写法（最简洁，无this问题） #

直接用ES7的async/await语法糖规避回调函数的作用域问题，代码可读性最高：

class MyClass {
   myClassMethod(arg1) {
       this.aSecondClassMethod(); // 直接用this调用即可
   }
   
   aSecondClassMethod() {
       //...
   }

   async methodWithPromise() {
       const value = await methodReturnPromise(); 
       this.myClassMethod(value); // 直接通过实例this调用方法，绑定关系不会丢失
   }
}

2. 用箭头函数作为then的回调 #

箭头函数会继承外层作用域的this，不需要提前把方法提取成变量：

methodWithPromise() {
    let aPromise = methodReturnPromise(); 
    aPromise.then(value => {
        // 这里的this就是外层的类实例
        this.myClassMethod(value);
    })
}

3. 给类方法绑定固定实例上下文 #

如果你的方法需要在很多异步场景下传递调用，可以直接在定义时绑定死this指向：

方式A：类属性箭头函数（最省事）

class MyClass {
   // 用箭头函数定义类方法，this会永久绑定到实例
   myClassMethod = (arg1) => {
       this.aSecondClassMethod();
   }
   
   aSecondClassMethod() {
       //...
   }

   methodWithPromise() {
       let aPromise = methodReturnPromise(); 
       // 直接传方法即可，不用担心this丢失
       aPromise.then(this.myClassMethod)
   }
}

方式B：构造函数内bind

class MyClass {
   constructor() {
       // 初始化时给方法绑定实例this
       this.myClassMethod = this.myClassMethod.bind(this)
   }
   myClassMethod(arg1) {
       this.aSecondClassMethod();
   }
   // 其余代码不变
}

内容的提问来源于stack exchange，提问作者N Johnson