setInterval 的角度问题

Question

我有这个代码：

export class GameControlComponent {
  @Output() counterUpdated = new EventEmitter<{counter: number, type: string}>();
  @Output() counterStop = new EventEmitter();
  counterSet: any;
  counterStart: number = 0;
   
  startCount() {
    console.log('counter is ' + this.counterStart);
    this.counterSet = setInterval(this.updateCount, 1000);
    //this.updateCount();
  }

  updateCount() {
    this.counterStart += 1;
    console.log('New counter is ' + this.counterStart);
    this.counterUpdated.emit({
      counter: this.counterStart, 
      type: (this.counterStart % 2) === 0 ? 'even' : 'odd'
    });  
  }

我在 html 组件中有一个按钮可以听这个：

(click)='startCount()'

。 现在，如果我使用

this.updateCount()

（上面评论过），一切正常，每次我按下按钮时，

counterStart

都会在方法

updateCount

中更新。 如果使用

this.counterSet = setInterval(this.updateCount, 1000)

，

counterStart

中的

updateCount

变成

NaN

.

为什么？有什么想法吗？

Answer 1

当您以这种方式将

this.updateCount

传递给

setInterval

时，

this

中的

updateCount()

将不会是

this

在

startCount()

中，而

counterStart

将是

undefined

。

因为

undefined + 1

是

NaN

，它会打印

NaN

。

您可以将其更改为

setInterval(this.updateCount.bind(this), 1000)

或

setInterval(() => this.updateCount(), 1000)

以将

this

传递给

updateCount

。