javascript - 使用 ES6 类方法处理 DOM 事件

Question

我不完全确定 StackOverflow 是否是提出该主题的正确位置，但我想如果我错了，我会得到纠正。

<小时/>

我问自己，在原型(prototype)链(或 ES6“类”)内处理 DOM 事件处理程序的“更好实践”是什么。

如果您绑定(bind)如下方法，就会出现问题:

node.addEventListener('click', this.clickHandler, false);

(完整示例如下)

当调用该方法时，您显然会丢失 this 上下文。我们可以通过将上下文绑定(bind)到该方法来解决此问题 (this.clickHandler.bind( this ))。使用这种技术的唯一问题是，bind() 当然会返回另一个函数引用。这反过来意味着，您不能简单地通过调用

来删除该处理程序

node.removeEventListener('click', this.clickHandler);

因为您正在处理不同的功能。到目前为止，我能想到的唯一方法是，在将绑定(bind)方法附加到事件之前创建该方法并将其存储在 this 上下文变量中:

this._boundClickHandler = this.clickHandler.bind( this );
node.addEventListener('click', this._boundClickHandler, false);

是的，这可以完成工作，但它看起来非常丑陋而且不太直观。 ES6 类中是否有更好的模式来解决此类问题？

class foo {
    constructor() {
        this._boundClickHandler = this.clickHandler.bind( this );
        document.body.addEventListener( 'click', this._boundClickHandler, false );
    }

    clickHandler( event ) {
        // do stuff
        document.body.removeEventListener( 'click', this._boundClickHandler );
    }
}

Answer 1

ES6 本身没有您想要的解决方案，但您可以使用 ES7 类属性:

class foo {
    constructor() {
        document.body.addEventListener('click', this.clickHandler, false );
    }

    clickHandler = event => {
        // do stuff
        document.body.removeEventListener('click', this.clickHandler);
    }
}

clickHandler 是一个粗箭头函数，将“this”上下文绑定(bind)到类实例，这正是您想要的