为什么以函数声明为参数的setInterval（）与匿名函数的工作原理不同？

Question

I don't understand why using function name in setInterval is not working correctly but passing annonymous function is working just right.

not working example (it's console logging NaN and before calling first time this.counter++ it's returning undefined as it couldn't find the variable?)

export class MyClassName {
 counter = 0;

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

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

but with startInterval changed like below it's working correctly

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

and in html we have

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

Answer 1

In the first example, you pass in a function reference without running it. When it runs, it runs in the global context where this is undefined, or this refers to the Window object. You can verify that it does in fact refer to the Window object by logging the value of this.constructor.name :

 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(); 

In the second example, 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.

 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(); 

You can find a pretty good summary of exactly how this works specifically with setInterval in the MDN docs for arrow functions .

Answer 2

The discrepancy is with the this keyword. In javascript anonymous/arrow functions do not create this to reference the caller of the function. while a conventional function declared with function keyword will capture the caller of the function in this .

Therefore, in your first example the startInterval() is called by the button element, which doesn't have a counter variable. And in the second example the this keyword refers to the outer scope this which is the window object. I assume MyClassName gets created under the window object, therefore the counter exists.

Further reading: https://www.codementor.io/dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc

Answer 3

That's because your this is calling to the function and therefore myFunc is not defined. You can learn about this context with a quick search. Some examples: 1 , 2 .

---

You can verify this by logging this.myFunc . The same will happen to this.counter if it ever gets called.

 let counter = 0; const startInterval = () => { // undefined, and hence it does not exist. console.log(this.myFunc); setInterval(this.myFunc, 1000); }; startInterval(); const myFunc = () => { this.counter++; console.log(this.counter); }; 

You can simply fix your code by reordering the functions and removing this .

 let counter = 0; const myFunc = () => { counter++; // Remove this from here as well. console.log(counter); }; const startInterval = () => { // Defined, and hence it works. setInterval(myFunc, 1000); }; startInterval();