JavaScript：利用 setInterval() 调用 class 方法

Question

我正在使用 class 方法制作一个简单的时钟。这是代码：

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。您需要传入一个函数或 class 方法，稍后将执行。当前，您正在自己执行该方法，并且正在将 return 值从该方法传递给 setInterval

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

的实例

这样做：

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

codesandbox example

Mdn Function.bind()

JavaScript：利用 setInterval() 调用 class 方法

JavaScript: Utilizing setInterval() to call a class method

javascript

setinterval

class-method