JavaScript:利用 setInterval() 调用类方法

Question

这个问题已经有答案了:

setTimeout() inside JavaScript Class using "this" (14 个回答)

Why does click event handler fire immediately upon page load? (4 个回答)

How to access the correct `this` inside a callback (15 个回答)

已关闭 3 年前。

我正在利用类方法制作一个简单的时钟。这是代码:

class clock{
  constructor(date){
    this.hour = date.getHours();
    this.minute = date.getMinutes();
    this.second = date.getSeconds();
  }

    updateHours(){
      if (this.hour==24){
        this.hour= 0;
      } else this.hour++;
    }
    updateMinutes(){
      if (this.minute==60){
        this.minute= 0;
        this.updateHours();
      }
      else this.minute++;
    }

    updateSeconds(){
      if (this.second ==60){
        this.second = 0;
        this.updateMinutes();
    } else{this.second++;}
      return (console.log(`${this.hour}:${this.minute}:${this.second}`)); 
}
}

let date = new Date();
let myClock = new clock(date);

setInterval(myClock.updateSeconds(), 1000);

案例#1:

上面输出一行并且从不重复。在调试器中，程序似乎只是卡在 setInterval() 行，并且永远不会返回到提供的函数。为什么会这样？

=====

案例 #2:

• setInterval(myClock.updateSeconds, 1000)

当我不包含函数的括号时，我应该获得函数描述，对吗？为什么这个输出 undefined:undefined:NaN

=====

案例#3:

• setInterval("myClock.updateSeconds()", 1000)

当我在函数周围加上引号时，一切都开始完美运行

=====

请详细说明 setInterval() 的功能以及这些情况之间的关系。我虽然有正确的想法(从某种意义上说，该函数只是简单地求值并接受返回值，如案例 1 中所做的那样)。任何事情都有帮助!谢谢!

Answer 1

您没有正确使用setInterval。您需要传入稍后将执行的函数或类方法。目前，您正在自己执行该方法，并将该方法的返回值传递给 setInterval

您还需要将方法绑定(bind)到类的实例，因为当您将方法传递给setInterval时，它会丢失this > 引用。 this 将指向 window 对象`，而不是您的类的实例。

这样做:

setInterval(myClock.updateSeconds.bind(myClock), 1000);

codesandbox example

Mdn Function.bind()