Typescript "this" instance is undefined in class

Question

I found this and online and now trying to put it in TS.

Running the following throws Uncaught TypeError: Cannot set property 'toggle' of null

@Injectable()
export class HomeUtils {
    private canvas: HTMLCanvasElement;
    private context;
    private toggle = true;

    constructor() { }

    public startNoise(canvas: HTMLCanvasElement) {
        this.canvas = canvas;
        this.context = canvas.getContext('2d');
        this.resize();
        this.loop();
    }

    private resize() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    }

    private loop() {
        this.toggle = false;
        if (this.toggle) {
            requestAnimationFrame(this.loop);
            return;
        }
        this.noise();
        requestAnimationFrame(this.loop);
    }

    private noise() {
        const w = this.context.canvas.width;
        const h = this.context.canvas.height;
        const idata = this.context.createImageData(w, h);
        const buffer32 = new Uint32Array(idata.data.buffer);
        const len = buffer32.length;
        let i = 0;

        for (; i < len;) {
            buffer32[i++] = ((255 * Math.random()) | 0) << 24;
        }

        this.context.putImageData(idata, 0, 0);
    }

}

I'm lost.

can you elaborate on how did you get the error?

Pragun
– Pragun

2018-03-16 11:14:06 +00:00
Commented Mar 16, 2018 at 11:14 — Pragun
– Pragun, Commented Mar 16, 2018 at 11:14
stackoverflow.com/questions/49314827/…

Vivek Doshi
– Vivek Doshi

2018-03-16 11:17:16 +00:00
Commented Mar 16, 2018 at 11:17 — Vivek Doshi
– Vivek Doshi, Commented Mar 16, 2018 at 11:17

Titian Cernicova-Dragomir · Accepted Answer · 2018-03-16 11:15:48Z

42

Methods do not capture this and are dependent on the caller to call them with the correct this. So for example:

this.loop() // ok
let fn = this.loop;
fn(); // Incorect this
fn.apply(undefined) // Undefined this

Since you pass loop to another function requestAnimationFrame you need to ensure that this is captured from the declaration context and not decided by requestAnimationFrame :

You can either pass an arrow function to requestAnimationFrame

private loop() {
    this.toggle = false;
    if (this.toggle) {
        requestAnimationFrame(() => this.loop());
        return;
    }
    this.noise();
    requestAnimationFrame(() => this.loop());
}

Or you can make loop an arrow function not a method:

private loop = () => {
    this.toggle = false;
    if (this.toggle) {
        requestAnimationFrame(this.loop);
        return;
    }
    this.noise();
    requestAnimationFrame(this.loop);
}

The second approach has the advantage of not creating a new function instance on each call to requestAnimationFrame, since this will be called a lot, you might want to go with the second version to minimize memory allocations.

answered Mar 16, 2018 at 11:15

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Relm Over a year ago

Ok, this was gonna trouble me I see, thanks proper expl.

Pavel Alexeev Over a year ago

What if my loop() function has a time argument: loop(time: number)?

awwsmm Over a year ago

"Methods do not capture this" -- what a great language

Oscar Paz · Accepted Answer · 2018-03-16 11:15:37Z

9

It's the call to requestAnimationFrame. You are passing a function not bound to a context, and so, inside that call to loop there is no this.

Change the call to:

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

Arrow functions, contrarily to normal functions, are bound to this.

answered Mar 16, 2018 at 11:15

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Typescript "this" instance is undefined in class

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related