TypeScript：从嵌套的经典函数访问外层的“this”，而不违反 linter 的“no-this-alias”规则

我们在 TypeScript 项目中使用 Airbnb 的 eslint 配置，其中包括 no-this-alias 规则。

这让我想知道，我如何能从嵌套的传统函数中访问外部的 this，而不违反这个规则？

这是代码：

class MyClass {
 
  name: string;

  target: EventTarget;
 
  constructor(name: string, target: EventTarget) {
    this.name = name;
    this.target = target;
  }
 
  initEventHandlers() {
    const self = this;
    function exampleEventHandler(this: EventTarget, e: Event) {
      console.log(this.somethingFromTheTarget);
      console.log(self.somethingFromMyClass);
    }
    this.target.addEventListener('exampleEvent', exampleEventHandler);
  }
}

事件处理函数是从事件库中调用的，使用 fn.call(this, e) 将 this 设置为事件目标，在事件处理函数的作用域中。显然，这里不适用箭头函数。

检查器对 const self=this; 这一行有问题。

我知道这是允许的：const { thisOneProperty }=this，然后可以在嵌套函数代码中使用thisOneProperty。但是当属性值被更新时，这没有任何好处。

这也可以：const myClass={ t: this };，然后我可以通过 myClass.t 来访问它。但那真的很丑。

那么，从事件处理函数内部访问 MyClass 的 this 的“干净”方法是什么？

答案＃1

测试这个

class MyClass {
 
  name: string;

  target: EventTarget;
 
  constructor(name: string, target: EventTarget) {
    this.name = name;
    this.target = target;
  }
 
  initEventHandlers() {
    const self = {
      somethingFromMyClass: this.somethingFromMyClass.bind(this)
    };

    function exampleEventHandler(this: EventTarget, e: Event) {
      console.log(this.somethingFromTheTarget);
      console.log(self.somethingFromMyClass);
    }
    this.target.addEventListener('exampleEvent', exampleEventHandler);
  }
}