javascript - 为什么以函数声明作为参数的 setInterval() 与匿名函数的工作方式不同？

Question

我不明白为什么在 setInterval 中使用函数名称不能正常工作，但传递匿名函数却能正常工作。

不工作的例子(它是控制台记录 NaN 并且在第一次调用 this.counter++ 之前它返回 undefined 因为它找不到变量？)

export class MyClassName {
 counter = 0;

 startInterval(){
   setInterval(this.myFunc , 1000)
 }

 myFunc(){
   this.counter++;
   console.log(this.counter)
 }
}

但是随着 startInterval 的改变，它工作正常

startInterval(){
  setInterval(() => this.myFunc() , 1000)
}

在 html 中我们有

<button (click)="startInterval()">Start</button>

Answer 1

在第一个示例中，您传入了一个函数引用而不运行它。当它运行时，它在 this 未定义的全局上下文中运行，或者 this 引用 Window 对象。您可以通过记录 this.constructor.name 的值来验证它确实引用了 Window 对象:

class MyClassName {
 counter = 0;

 // You are passing in a function name but not running it yet.
 // It will be run in a global context by setInterval.
 startInterval(){
   setInterval(this.myFunc, 1000)
 }

 myFunc(){
   // When run in global context, this no longer refers to our instance.
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

在第二个示例中，箭头函数使用声明它们的地方的 this，而不是它们运行的​​地方。所以类的 this 被捕获在下面，即使箭头函数将在全局上下文中运行。

class MyClassName {
 counter = 0;

 // Arrow functions use the `this` of where they are declared, not where they are run.
 // So the `this` of the class is captured below, even though the arrow function
 // will run in the global context.
 startInterval(){
   setInterval(() => this.myFunc(), 1000);
 }

 myFunc(){
   console.log(this.constructor.name);
   this.counter++;
   console.log(this.counter)
 }
}

const mc = new MyClassName();

mc.startInterval();

您可以在 MDN docs for arrow functions 中找到关于 setInterval 具体工作原理的非常好的总结。 .