Use arrow function as method passed to requestAnimationFrame

Question

I have an object with a method that will be passed to requestAnimationFrame. At the moment I create the object than reassign the method with an arrow function it returns.

var player={fn:function(){return ()=>{game.circle(this.x,this.y,this.radius)}},
x:200,y:300,radius:20};
player.fn=player.fn();

Can this be done without the reassigning the method after creating the object?

Answer 1

You could just use a static reference to player instead:

const player = {
  fn() {
    game.circle(player.x, player.y, player.radius);
  },
  x:200,
  y:300,
  radius:20
};
requestAnimationFrame(player.fn);

But no, otherwise there's no way to write this without a separate assignment. Usually you however would just bind or use the arrow function when calling requestAnimationFrame:

var player = {
  fn() {
    game.circle(this.x, this.y, this.radius);
  },
  x:200,
  y:300,
  radius:20
};
requestAnimationFrame(() => player.fn());