能否将类的当前上下文（this）传入Promise的解析器中？

首先看你遇到的报错cannot read someObject of undefined，乍一看确实像是this指向出了问题，但先别急，我们先聊聊在Promise回调里正确保留this的几种常见方案，再说说你最后发现的问题。

常见的this绑定解决办法 #

如果真的是this丢失的场景，有几种可靠的处理方式：

• 使用箭头函数：箭头函数会自动继承外层作用域的this，这是最简洁的方案。其实你原本的代码里已经用了箭头函数作为Promise的解析器，理论上this是不会丢失的——这也侧面说明问题大概率不在代码本身：

  class A {
    constructor(someObject) {
      this.someObject = someObject;
    }
    foo() {
      return new Promise((resolve) => {
        // 箭头函数继承了foo方法里的this，也就是A类的实例
        this.someObject.doAsyncRequest(arg, function(val) {
          resolve(val);
        });
      });
    }
  }
  

• 提前保存this到变量：在进入Promise回调前，把当前this赋值给一个变量（比如self或that），在回调里直接用这个变量：

  foo() {
    const self = this;
    return new Promise(function(resolve) {
      self.someObject.doAsyncRequest(arg, function(val) {
        resolve(val);
      });
    });
  }
  

• 用bind()绑定this：给Promise的回调函数显式绑定当前的this：

  foo() {
    return new Promise(function(resolve) {
      this.someObject.doAsyncRequest(arg, function(val) {
        resolve(val);
      });
    }.bind(this));
  }
  

你的实际问题 #

正如你后来排查发现的，这段代码本身是完全有效的，报错是因为webpack在文件中插入了无用代码导致的——这种第三方工具的隐性bug确实容易让人误以为是自己的代码逻辑出了问题，踩坑了也挺无奈的😂。

总结一下：以后再遇到类似this丢失的报错，先通过上面几种方法排查代码逻辑；如果代码本身没问题，记得考虑是不是构建工具、打包插件这类外部因素搞的鬼。

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