第三方库正在绑定回调，但我需要访问 class 属性

Question

我看到了几个关于在 classes 和函数中使用 "this" 的问题，但我认为我没有看到我特别要找的东西。

我的情况是：

我在 class 方法中从第三方库调用函数。但是，第三方库函数正在调用 callback.bind(this)，我需要访问它绑定的上下文。

但我也希望能够访问 class 属性。这可能吗？如果没有，有哪些潜在的解决方法？代码大纲类似于：

class MyClass {
  myProperty = 'something';

  myMethod() {
    console.log(this.myProperty);
  }

  otherMethod() {
     thirdPartyLibrary.functionRequiringCallback(function() {
       this.MyMethod(); //undefined
       this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary
     });
  }
}

我当然可以将回调设为箭头函数，这样 "this" 就可以引用 class 作用域，但这样我就无法访问 "requiredThirdPartyFunction"。

如有任何帮助，我们将不胜感激。

Answer 1

当您想要引用您的实例 this 时，您始终可以使用旧的 that = this 赋值。您将 this 分配给作用域中的一个变量（通常是 that），然后您可以在回调中引用它。

otherMethod() {
  const that = this; // set a reference to the instance this

  thirdPartyLibrary.functionRequiringCallback(function() {
    that.MyMethod(); // that refers to your class instance this
    this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary
  });
}

另一种选择是绑定myMethod，通过使用箭头函数或Function#bind，然后将绑定的方法赋给一个变量：

class MyClass {
  myProperty = 'something';

  myMethod = () => console.log(this.myProperty);

  otherMethod() {
     const myMethod = this.myMethod; // assign the bound method to a variable

     thirdPartyLibrary.functionRequiringCallback(function() {
       MyMethod(); // will be invoked with original this
       this.requiredThirdPartyFunction(); //"this" refers to thirdPartyLibrary
     });
  }
}

Answer 2

这里没有太多选择。由于只有一个this，它可以是词法：

  otherMethod() {
     thirdPartyLibrary.functionRequiringCallback(() => {
       this.MyMethod();
       thirdPartyLibrary.requiredThirdPartyFunction();
     });
  }

或动态：

  otherMethod() {
     const _this = this;
     thirdPartyLibrary.functionRequiringCallback(function() {
       _this.MyMethod();
       this.requiredThirdPartyFunction();
     });
  }

第一个选项更具可读性，可能是更好的选择，因为从上面的代码中看不出 this === thirdPartyLibrary 内部回调。

第三方库正在绑定回调，但我需要访问 class 属性

Third party library is binding callbacks, but I need to access class properties

javascript

this

ecmascript-6

es6-class