在绑定方法中获取类的 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() {&nbsp; const listener = this.getListener()&nbsp; this.targets.forEach(target => {&nbsp; &nbsp; target.addEventListener('click', listener, false)&nbsp; })}private getListener() {&nbsp; const self = this&nbsp; return function (e: Event) {&nbsp; &nbsp; // self if EventListenerHelper this&nbsp; &nbsp; // this is Event this&nbsp; }}但我看不出它有多大好处，因为this在你传递给的函数内部addEventListener等于event.currentTarget，所以你可以只绑定你的监听器并使用属性而不是this：constructor() {&nbsp; // ...&nbsp; this.listener = this.listener.bind(this)}private listener(e) {&nbsp; // this is EventListenerHelper this&nbsp; // e.currentTarget is Event this}