How to properly set a new value for a variable into a javascript class

Question

I would like to check the value of a variable inside my requestAnimationFrame function. I implement this value on the scroll wheel event. It seems to work but when I check the value inside my RAF fonction, it's still set at its first value.

I wonder how can I properly set my this.deltaY value ? Thank you very much

class MyClass
{
    constructor ()
    {   
        this.deltaY = 0;
    }

    init ()
    {
        this.playRAF();
        window.addEventListener('wheel', function(e) {
            this.deltaY = e.deltaY;

            console.log(this.deltaY); 
            // it returns a number
        });

    }

    playRAF ()
    {
        this.leRaf = requestAnimationFrame(this.playRAF.bind(this));
        
        console.log(this.deltaY); 
        // it returns 0 all the time despite the function above :(
    }
}

//////

const foo = new MyClass();
foo.init();

Use an arrow function here: window.addEventListener('wheel', e => {} — adiga
– adiga, Commented Jun 22, 2020 at 13:44
@adiga, thanks for your answer. Unfortunately, this issue is not related to what's inside my event listener but it's related on the value inside my playRAF function. Plus I don't want to use self since I will have several instances of my class. — Michaël
– Michaël, Commented Jun 22, 2020 at 13:51
Your event listener is definetely an issue. Without an arrow function, it will not set this.deltaY = e.deltaY to the instance. Since you have a this.playRAF() outside, I'm assuming init is called on the instance of the class. — adiga
– adiga, Commented Jun 22, 2020 at 13:58
Also, you probably need to call this.playRAF() INSIDE the event listener if you want that called every time wheel event occurs. — adiga
– adiga, Commented Jun 22, 2020 at 14:02
Thanks for your answer. playRAF() is a request animation frame function. So it is called all the time as soon as it is first call it. Yes I call my init() function with my instance. Since I changed my addEventListener with the arrow, my console.log(this.deltaY) returns "undefined", it seems it's not accessible anymore. — Michaël
– Michaël, Commented Jun 22, 2020 at 14:10

Aobo Cheng · Accepted Answer · 2020-06-22 14:21:11Z

1

This is an `this` issue

pay attention to this block, in the event listener callback, this is window, instead of the class instance as you thougt it is.

window.addEventListener('wheel', function(e) {
  this.deltaY = e.deltaY;

  console.log(this.deltaY); 
  // it returns a number
});

try to check the value window.deltaY, you will find that it's your logged number, or try a breakpoint debugging, the this in the function(e){} is Window object.

turn it into

window.addEventListener('wheel',(e) => {
  this.deltaY = e.deltaY;

  console.log(this.deltaY); 
  // it returns a number
});

will solve this problem, as the arrow will not create a function block, this will be the class instance as expected.

answered Jun 22, 2020 at 14:21

Aobo Cheng

4,5883 gold badges27 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

How to properly set a new value for a variable into a javascript class

1 Answer 1

This is an `this` issue

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

This is an this issue

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

This is an `this` issue