Javascript: calling methods in classes with this

Question

Now my Code works as intended, but I don´t understand the keyword this at this one place. When I try to call the mainLoop method in the requestAnimationFrame with window.requestAnimationFrame(this.mainLoop); it doesn´t work.

When I tried it like I did in my example it worked, but I didn´t understand why I couldn´t call the mainLoop method with this, while being able to call all the other methods in this class with this.methodName();.

class Game{
  constructor(objects){
    //some stuff
  }

  temp(){
    a.mainLoop();
  }

  mainLoop(){

    // some other Methods are being called here

    window.requestAnimationFrame(this.temp);
  }
}

var a = new Game(input);

I hope I was able to explain, my problem.

The value of this changes inside the handler if you aren’t using an arrow function or explicitly binding this with bind(). — Alexander Staroselsky, Oct 12 '19 at 19:44

score 0 · Accepted Answer · answered Oct 12 '19 at 19:45

Callback you passed into window.requestAnimationFrame will run in the different context, where this will not be instance of your current object anymore. As a workaround you can pass this.temp.bind(this) instead or use arrow function () => this.temp().

Javascript: calling methods in classes with this

1 Answers1