具有可重用事件处理程序方法的自定义元素类[重复]

Question

此问题已经在这里有了答案：

How to access the correct `this` inside a callback?（11个答案）

[<8天前关闭。

我有一个使用此Custom Element类的自定义按钮：

class Button extends HTMLElement {
    connectedCallback() {
        document.addEventListener('click', this.reusableClickHandler)
    }

    disconnectedCallback() {
        document.removeEventListener('click', this.reusableClickHandler)
    }

    reusableClickHandler() {
        console.log(this) // how to get `this` to equal the button instance
    }
}

自定义按钮侦听document的点击，并在从DOM中删除按钮时删除过时的事件处理程序。
我是否可以将this中的reusableClickHandler()保持等于按钮实例？我不确定如何写。
而且我知道以这种方式创建的按钮不是最佳的，它只是为了演示问题。谢谢

Answer 1

要在回调中获得特定的this引用，可以将回调与所需对象绑定。

document.addEventListener('click', this.reusableClickHandler.bind(this));

仅附带说明，bind返回一个新函数，如果需要删除事件侦听器，则您可能希望将绑定函数存储在类变量（可能在构造函数中）中，并使用class属性来添加和删​​除事件侦听器。