Question

class Elemento
{
  constructor (numerito)
  {
  this.numero = document.getElementById(numerito).innerText
  this.boton = document.getElementById(numerito)

  }
  escribir()
  {
    console.log(this.numero)
  }
}
numeroUno = new Elemento("1")
numeroUno.boton.addEventListener("click", numeroUno.escribir)

我正尝试在单击按钮时在控制台 numerito 中显示值，但显示“ undefined”。

Answer 1

我强烈怀疑这是一个this绑定问题-当用户单击按钮后浏览器调用事件处理程序numeroUno.escribir时，事件处理程序{{1 }}对象。

一种解决方案是使用numeroUno方法来修复该方法的bind引用，无论其如何调用：

this

Answer 2

您没有利用传递给构造函数的值，请尝试以下操作：

class Elemento
{
  constructor (numerito)
  {
  this.numero = numerito  // See here, use the numerito passed to the constructor function
  this.boton = document.getElementById(numerito)

  }
  escribir()
  {
    console.log(this.numero)
  }
}
numeroUno = new Elemento("1")
numeroUno.boton.addEventListener("click", numeroUno.escribir)

Answer 3

可以通过将 该类中的函数 明确绑定到此来解决此问题。

绑定语法为：

function_name = this.function_name.bind（this）

这是可行的解决方案：

<html>
    <head>
        <title>demo</title>
    </head>
<body>
    <div>
        <button id="1">Numerito</button>
    </div>
    <script>
       class Elemento {
           constructor (numerito) {
               this.numero = document.getElementById(numerito).innerText
               this.boton = document.getElementById(numerito)
           }
           escribir() {
               console.log("numero = " + this.numero)
           }

           // JavaScript expects an explicit binding of each function in the class
           //
           // Binding syntax is:  
           //
           // function_name = this.function_name.bind(this)

           escribir = this.escribir.bind(this)
        }
        numeroUno = new Elemento("1")
        numeroUno.boton.addEventListener("click", numeroUno.escribir)
    </script>
</body>
</html>

单击按钮时，控制台中会显示“未定义”

3 个答案: