在绑定方法中获取类的 this 上下文，同时保留绑定 this

Question

我正在为 addEventListener 创建一个小的辅助类。我遇到的问题是我无法有效地同时获得类的 this 上下文和事件的 this 上下文（附加的事件目标）。(1) 如果我使用箭头函数，我可以获得类的 this，但我无法获得绑定的 this（通过 Function.prototype.call）(2) 如果我使用函数表达式，我可以得到绑定的this，但是我不能访问类。(3) 我也不能使用内部封闭。必须从外部范围引用函数/方法。这是一个简化的例子，向您展示我的意思。有没有办法勾选所有方框？我所能想到的就是创建另一个帮助程序类，该类将为附加的每个事件侦听器进行初始化，但是如果有更简单的方法，那似乎效率不高。class EventListenerHelper {    private targets: Array<EventTarget>    constructor() {        // If there was a single target, it would be very easy. But there are multiple        this.targets = [            document.body,            window        ];    }     /**     * (1) - Try to use an arrow function     *      * This falls short because it's not possible to get the this context of the Event     */    private attachWithArrowFunction() {        this.targets.forEach((target) => {            target.addEventListener('click', this.listenerCallbackArrow, false);        });    }    private listenerCallbackArrow = (e: Event) => {        // Cannot get event this        const eventThis = undefined;         // Note that e.target is the innermost element which got hit with the event        // We are looking for that target that had the event listener attached        // If I'm not mistaken, the only way to get it is from the this context        // which is bound to the event callback        this.processListener(eventThis, e);       }    /**     * (2) - Try to use a regular class method     *      * This falls short because it's not possible to get the this context of the class     */    private attachWithClassMethod() {        this.targets.forEach((target) => {            target.addEventListener('click', this.listenerCallbackMethod, false);        });    }    private listenerCallbackMethod(e: Event) {         // Here we have the eventThis         const eventThis = this;        // But the class instance is completely unreachable    }

Answer 1

一种常见的处理方法是返回一个函数：

private attach() {

  const listener = this.getListener()

  this.targets.forEach(target => {

    target.addEventListener('click', listener, false)

  })

}

private getListener() {

  const self = this

  return function (e: Event) {

    // self if EventListenerHelper this

    // this is Event this

  }

}

但我看不出它有多大好处，因为this在你传递给的函数内部addEventListener等于event.currentTarget，所以你可以只绑定你的监听器并使用属性而不是this：

constructor() {

  // ...

  this.listener = this.listener.bind(this)

}

private listener(e) {

  // this is EventListenerHelper this

  // e.currentTarget is Event this

}