Es6 class "this" in callback of requestAnimationFrame?

Question

I use the requestAnimationFrame inside a ES6 class such as

 class MyClass{...

     run(){
         requestAnimationFrame(this.animate);
         //also tried requestAnimationFrame(() => this.animate);
     }

     animate(){
        //how to get I back "this" here
     }

I cannot get back the reference to "this" in the callback of the requestAnimationFrame. Any idea how to do this?

Jonas Wilms · Accepted Answer · 2020-06-01T16:33:24.233

15

You have to bind the context either by using an arrow function:

 requestAnimationFrame(() => this.animate());

or by binding the function to the context:

 requestAnimationFrame(this.animate.bind(this));

In newer JavaScript you could also use a class property containing an arrow function:

 class MyClass {
   run(){
     requestAnimationFrame(this.animate);         
   }

   animate = () => {
     //..      
   }
}

edited Jun 01 '20 at 16:33

answered Mar 09 '18 at 16:08

Jonas Wilms

132,000
20
149
151

requestAnimationFrame(() => this.animate); this doesn't work as noted in my code – Eric Mar 09 '18 at 16:09
@eric, right, you actually need to call the function – Jonas Wilms Mar 09 '18 at 16:09
it's `() => this.animate()` – Tomasz Bubała Mar 09 '18 at 16:09
If you use the timestamp parameter sent to your callback function, then the bind syntax works nicely. – Kent Weigel Nov 19 '18 at 02:53
Is the `animate = () => { //.. }` safe now? – gonnavis Jun 01 '20 at 08:23
@gonnavis well it's specified, but the browser support is not yet there. – Jonas Wilms Jun 01 '20 at 16:31

score 3 · Answer 2 · answered Mar 09 '18 at 16:12

3

Jonas W.'s answer is the way to go. You can also bind methods in constructor, like this:

class MyClass {
  constructor() {
    super();
    this.run = this.run.bind(this);
    this.animate = this.animate.bind(this);
  }
}

answered Mar 09 '18 at 16:12

Tomasz Bubała

2,093
1
11
18

Es6 class "this" in callback of requestAnimationFrame?

2 Answers2

Linked

Related