Question

我通常使用Java进行编程，当我向类中的属性添加事件侦听器时，可以从该类中调用方法定义事件。但是在JavaScript中，如果我使用“ this”。在函数内部，上下文为“ onclick”，如果我不使用“ this”。我收到未定义resetear的错误。如何在onclick函数中从Calculadora访问属性和方法？

class Calculadora{
    constructor () {
        this.resultado = document.getElementById("resultado");
        this.c = document.getElementById("C");
        ...

        this.memoria = "";
        this.a = 0;
        this.b = 0;
        this.operacion = "";
    }

    resetear(){
        this.resultado.textContent = "";
        this.a = 0;
        this.b = 0;
        this.operacion = "";
    }

    assignar() {
        this.c.onclick = function(e){ // Here I need to change some things about Calculadora
            resultado.textContent = "";
            this.a = 0;
            this.b = 0;
            this.operacion = "";
        }
        ...
    }
}

Answer 1

您可以使用箭头函数定义onclick处理程序：

this.c.onclick = e => {

}

这样做，处理程序中的this是类本身。

在function创建新作用域时，箭头功能保留了该作用域。

Answer 2

您可以使用ES6 Arrow Function：

class Calculadora{
    constructor () {
        this.resultado = document.getElementById("resultado");
        this.c = document.getElementById("C");
        ...

        this.memoria = "";
        this.a = 0;
        this.b = 0;
        this.operacion = "";
    }

    resetear = () => {
        this.resultado.textContent = "";
        this.a = 0;
        this.b = 0;
        this.operacion = "";
    }

    assignar = () => {
        this.c.onclick = e => {
            resultado.textContent = "";
            this.a = 0;
            this.b = 0;
            this.operacion = "";
        }
        ...
    }
}

箭头函数将外部范围（它们在其中定义的范围）的上下文传递给该函数。详细了解箭头功能here。

如何从click事件中调用类函数

2 个答案: