Question

我只是想把一个天文台放在html中，但在第一个＆＃39; if＆＃39;方法cronometro（）的this.centesimas的值是undefine，我真的不明白为什么，因为我在类的构造函数中声明了这些变量。

class NotaView {
  constructor () {
    this.centesimas = 0;
    this.segundos = 0;
    this.minutos = 0;
 }
  startCronometro() {
    this.control = setInterval(this.cronometro,10);


}

 cronometro () {

     this.Centesimas = document.getElementById("Centesimas");
     this.Segundos = document.getElementById("Segundos");
     this.Minutos = document.getElementById("Minutos");

     if (parseInt(this.centesimas) < 99) {
         parseInt(this.centesimas++);
        if (parseInt(this.centesimas) < 10) { this.centesimas = "0" + parseInt(this.centesimas) }
        this.Centesimas.innerHTML = ":" + parseInt(this.centesimas);
        console.log(this.centesimas)
    }
    if (parseInt(this.centesimas) == 99) {
        this.centesimas = -1;
    }
    if (parseInt(this.centesimas) == 0) {
        parseInt(this.segundos ++);
        if (parseInt(this.segundos) < 10) { this.segundos = "0" + parseInt(this.segundos )}
        this.Segundos.innerHTML = ":" + parseInt(this.segundos);
    }
    if (parseInt(this.segundos) == 59) {
        this.segundos = -1;
    }
    if ( (parseInt(this.centesimas) == 0)&&((this.segundos) == 0) ) {
        parseInt(this.minutos++);
        if (parseInt(this.minutos) < 10) { this.minutos = "0" + parseInt(this.minutos )}
        this.Minutos.innerHTML = ":" + parseInt(this.minutos);
    }

Answer 1

创建函数时不确定this的值，它取决于函数的调用方式。您将直接调用该函数作为setInterval的回调。最终以chronometro作为全局对象（或严格模式this未定义）调用this。

解决此问题的方法很少。如果您可以使用Ecmascript 2015，我建议创建一个箭头函数并在其中调用this.cronometro：

startCronometro() {
  this.control = setInterval(() => this.cronometro(), 10);
}

如果您不能使用ES2015，您也可以使用常规功能，但您需要手动保存this的值：

startCronometro() {
  var self = this;
  this.control = setInterval(function () {
    self.cronometro();
  }, 10);
}

或者您可以创建cronometro函数的绑定版本：

startCronometro() {
  this.control = setInterval(this.cronometro.bind(this),10);
}

为什么如果在同一个班级中，该值是未定义的？

1 个答案: