Question

我需要有一个方法来引用其他可能嵌套的方法。所有方法都属于同一个对象。以下代码解释了我想做的一切：

class SomeClass {

  functionPop(this.mainFunc);

  functionPop(func) {
    func();
  }
  mainFunc() {
    console.log('This will be printed');
    this.nestedFunc(); //Here is an error
  }
  nestedFunc() {
    console.log('We didnt reach this point');
  }

}

错误告诉我，这是一个未定义的问题。我理解方法mainFunc中的单词“this”并不引用SomeClass的对象。我知道我可以解决它做这样的事情：

class SomeClass {

  functionPop(this.mainFunc);

  functionPop(func,nestedFunction) {
    func(nestedFunction);
  }
  mainFunc(nestFunc) {
    console.log('This will be printed');
    nestedFunction();
  }
  nestedFunc() {
    console.log('Here we are successfully - this will be printed');
  }

}

我觉得这是远离正确的解决方案，任何想法如何使这更好 - 没有这些参数？

Answer 1

无论何时传递像functionPop(this.mainFunc);这样的函数引用，函数内的上下文（this）都会根据它的调用方式而改变。在这种情况下，functionPop内的上下文中没有上传func()，因此this将为undefined。

要修复此问题，您可以在传递函数时使用arrow function包装函数 - 这将保留上下文：

functionPop(() => this.mainFunc());

或使用Function.bind设置上下文：

functionPop(this.mainFunc.bind(this));

另见：Red Flags for this。

Answer 2

在Javascript中，'this'根据调用上下文可能有所不同。在您的情况下，您正在丢失呼叫上下文，这就是出现错误的原因。

有几种方法可以解决这个问题：

使用箭头功能。与通常的相反，他们没有创造自己的上下文（ES6功能）。
使用'bind'来绑定所需的上下文。

有关可能选项的示例和优缺点的更多详细信息，请查看以下链接：

https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript

具有嵌套方法的方法引用参数的方法

2 个答案: