我对事件处理程序回调函数作为一个类方法感到困惑？[重复]

Question

这个问题在这里已经有了答案:

如何在回调中正确访问 "this"？ (11个回答)

封闭 21天之前.

我知道这可能看起来很傻，但我是一个初学者，我只是需要确保我理解它。

在JavaScript中，当我定义一个事件监听器，回调函数的调用没有（），以防止立即执行，像下面的例子。

document.querySelector('#button').addEventListener('click',eventHandler)

function eventHandler() {
    alert('clicked')}

我的困惑是，如果在一个类中实现了上述功能，并将eventHandler回调函数定义为一个方法，我必须使用（）时，我调用它，像下面的例子。

class home {
    constructor(){
       this.button = document.querySelector('#button')
       this.clickEvent()
    }

    //events
   clickEvent(){
       //here i have to use eventHandler() not eventHandler
       this.button.addEventListener('click',()=>this.eventHandler())
    }
    //method
    eventHandler(){
        alert('clicked')
    }

}

new home()

Answer 1

在带类的代码片断中，你正在传递一个函数到 addEventListener 函数，然后调用 eventHandler 函数。

() => this.eventHandler() 是一个箭头函数，执行 this.eventHandler() 体内

如果你删除了箭头函数，那么你将不得不传递函数的名称，而不是调用它。

this.button.addEventListener('click', this.eventHandler)

编辑。

请记住，如果 eventHandler 该方法使用 this的值，那么你可能会遇到问题。this 是在不同的情况下设置的。

目前，。eventHandler 函数没有使用 this 但你应该读 如何在回调中访问纠正这个问题.