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

我有一个使用此自定义元素类的自定义按钮：

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
    }
}

自定义按钮侦听对

文档的单击，并在从DOM中删除按钮时删除过时的事件处理程序

我是否可以将
这个
保持在
可重用ClickHandler（）
中，与按钮实例相同？我不知道怎么写

我也知道用这种方式创建的按钮不是最优的，它只是为了演示问题。感谢
在回调中获取特定的
此
引用，您可以将回调绑定到所需的对象

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

请注意，
bind
返回一个新函数，如果需要删除事件侦听器，则可能需要将绑定函数存储在类变量（可能在构造函数中）中，并使用class属性添加和删除事件侦听器。
请尝试
document.addEventListener（'click'，this.reusableClickHandler.bind（this））
另一种模式是将
addEventListener
和
removeventlistener
保持在同一范围内：@Danny'365CSI'Engelman处理添加/删除的好方法。当您有多个处理程序时，添加一个数组：
this.handlers.push（侦听（…）
然后在
断开连接的回调中
所需的是：
this.handlers.forEach（removeFunc=>removeFunc（））