requestAnimationFrame works only without using classes, how can I fix it?

Question

I'm trying to learn javascript and canvas for animations and simple games, I've written 2 versions of a test game, functional programming first, then objects (with babel), both have the same raw code for the animation update but it only the first version works in the browser, the oop one, gives me the error:

ReferenceError: update is not defined

how should I manage the update on requestAnimationFrame ?

I've tried changing the variable to this.update or this.update() but the result is the same

functional:

var c = document.getElementById("game");
var ctx = c.getContext("2d");
c.width = window.innerWidth/2;
c.height = window.innerHeight/2;
ctx.scale(20,20);
var player = {
  pos: { x:0, y:0 },
  vel: 2

};

var keys = {
  left:37, up:38, right: 39, down:40
};



function update() {
  ctx.clearRect(0, 0, c.width, c.height);
  draw();
  requestAnimationFrame(update);
}

function draw() {
  ctx.fillRect(player.pos.x, player.pos.y, 1, 1);
  //ctx.clearRect(0, 0, c.width, c.height);
}

function keyboardHandler(event) {
  switch(event.keyCode) {
      case keys.left:
        player.pos.x -= 1*player.vel;
        console.log(player.pos.x);
        break;
      case keys.up:
        player.pos.y -= 1*player.vel;
        console.log(player.pos.y);
        break;
      case keys.right:
        player.pos.x += 1*player.vel;
        console.log(player.pos.x);
        break;
      case keys.down:
        player.pos.y += 1*player.vel;
        console.log(player.pos.y);
        break;
  } // switch
} // keyboardhandler

document.addEventListener('keydown', keyboardHandler, false);
update();

objects(babel):

class Game {

  constructor() {
    this.c = document.getElementById("game");
    this.ctx = this.c.getContext("2d");
    this.c.width = window.innerWidth/2;
    this.c.height = window.innerHeight/2;
    this.ctx.scale(20,20);
    this.player = {
      vel: 2,
      pos: {x:0,y:0}      
    };
    this.keys = {
  left:37, up:38, right: 39, down:40
};
  } // constructor

  draw() {
    this.ctx.fillRect(this.player.pos.x, this.player.pos.y, 1, 1);
  }

  update() {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update);


  }
  /* keyboardHandler(event) {
    switch(event.keyCode){
      case self.keys.left:
        this.player.pos.x -= 1;
        console.log("Sinistra -> " + self.player.pos.x);
        break;
        case self.keys.up:
        self.player.pos.y -= 1;
        console.log("Su -> " + self.player.pos.y);
        break;
        case self.keys.right:
        this.player.pos.x += 1;
        console.log("Destra -> " + self.player.pos.x);
        break;
        case self.keys.down:
        this.player.pos.y += 1;
        console.log("Giù -> " + self.player.pos.y);
        break;
    } // switch
  } // keyboardHandler*/
}


// calls

let game = new Game();
game.update();
console.log(game);
document.addEventListener('keydown', (event) => {
  switch(event.keyCode){
      case game.keys.left:
        game.player.pos.x -= 1;
        console.log("Sinistra -> " + game.player.pos.x);
        break;
        case game.keys.up:
        game.player.pos.y -= 1;
        console.log("Su -> " + game.player.pos.y);
        break;
        case game.keys.right:
        game.player.pos.x += 1;
        console.log("Destra -> " + game.player.pos.x);
        break;
        case game.keys.down:
        game.player.pos.y += 1;
        console.log("Giù -> " + game.player.pos.y);
        break;
    } // switch
}, false);

Answer 1

You have to either: 1) bind your method to this or, 2) use an arrow function.

1st option:

...
update() {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update.bind(this));
}

2nd option:

...
update = () => {
    this.ctx.clearRect(0, 0, this.c.width, this.c.height);
    this.draw();
    requestAnimationFrame(this.update);
}