在 eventListener 函数 Javascript 中访问 class 方法

Question

我有一个 Class 名称对话框。在这个 class 中，我有一个方法 hide() 来隐藏对话框本身及其模式框。但是我无法从“onclick”函数访问隐藏函数。我怎样才能访问它？

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        this._closeButton.on('click', function(){
            //how to access hide() function from here?
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}

Answer 1

Javascripts this 事件侦听器中的上下文更改。您可以通过将 this 上下文添加到单独的变量来解决此问题：

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        const self = this;

        this._closeButton.on('click', function(){
            //how to access hide() function from here?
            self.hide()
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}

如您所见，我将 this 上下文分配给变量 self。之后，您可以使用 self.

访问 class 上下文

Answer 2

我认为这对你有用

this._closeButton.on('click', this.hide.bind(this));

事件侦听器中的上下文不同，因此您应该将实际的 this 绑定到 eventListener 上下文

Answer 3

如果您使用的是 es6+，请将 onclick 函数的侦听器更改为箭头函数。箭头函数不会覆盖 this

class Dialog{
    constructor(id){
        this._dialogBox = $('.dialog#'+this.id);
        this._closeButton = this._dialogBox.find('span.closedialog');

        this._closeButton.on('click', () => {
           this.hide();
        });

    }
    hide(){
        this._dialogBack.hide();
        this.dialogBox.hide();
    }
}````

在 eventListener 函数 Javascript 中访问 class 方法

Accessing class method inside eventListener function Javascript

javascript

class

object

this

this-keyword