javascript - 如何在类的构造函数中添加事件侦听器，但句柄函数调用类内部的方法（es6）？

Question

我的问题：

我有这个名为 es6 的类App，我想将事件侦听器添加到函数中.someElement元素的 click 事件中constructor，并且在句柄函数内部，我想从App该类中调用 2 个方法：

class App {
    constructor() {
        document.querySelector('.someElement').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            this.firstMethod() // The method from the App class
            this.secondMethod(targetInnerText) // The method from the App class
        })
    }

    firstMethod() {
        console.log('You clicked an element')
    }

    secondMethod(text) {
        console.log(`You clicked an element with inner text is ${text}`)
    }
}

但问题是，您可能已经看到，我们在执行firstMethodand时出错secondMethod，因为 this 关键字现在设置了带有.someElement类的元素，它不再设置为App类。

我尝试了什么：

我尝试创建另一种方法，像以前一样添加事件侦听器。但是这个方法会接受一个名为 的参数callback，所以我可以在构造函数中使用这个方法，然后将firstMethod作为callback参数传递，像这样：

class App {
    constructor() {
        this.addEventListenerWithCallbacks(this.firstMethod)
    }

    addEventListenerWithCallbacks(callback) {
        document.querySelector('.country').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            callback()
        })
    }

    firstMethod() {
        console.log('You clicked an element')
    }

    secondMethod(text) {
        console.log(`You clicked an element with inner text is ${text}`)
    }
}

但是您可能已经知道的问题是它只能具有 1 个功能，对吧？所以我想我会使用休息参数来做到这一点：

...
addEventListenerWithCallbacks(...callbacks) {
        document.querySelector('.country').addEventListener('click', function (e) {
            const targetInnerText = e.target.innerText
            callbacks.forEach(cb => cb())
        })
    }
...

但我认为这不是很好。所以这就是我想问的，我想问是否有更好的方法来解决我的问题，我也想知道在这种情况下使用休息参数是否是一个好的选择。非常感谢您阅读这个问题！

标签： javascriptoopconstructoraddeventlisteneres6-class