[Javascript] This

[Chaosy]

I've got a a piece of code which basically looks like:

class Name {

    someFunc() {
        console.log(this.x);
    }

    constructor() {
        this.x = 1;
        this.something.addEventListener("click", someFunc);
    }
}

Which writes undefined because "this" refers to "this.something" instead of the instance.

Are there any ways to work around that?

 

[GhostWolf]

There are two common ways to call back a method.

The first is to create a new instance of your method, bound to your this:

this.something.addEventListener("click", someFunc.bind(this))// this.someFunc needed? not sure what class syntax sugar turns into

The first parameter to Function.prototype.bind is whatever you want this to be when the function is called.

The second way is to create a closure.

Assuming ES6, since you use the class keyword, you can use an arrow function:

this.something.addEventListener("click", () => someFunc()) // this.someFunc() needed? not sure what class syntax sugar turns into

If for some reason you don't want an arrow function, use a regular closure:

let self = this;
this.something.addEventListener("click", function () { self.someFunc(); }); // Anonymous closure, self is saved in its scope

Note that whichever way you write it, you will end up generating new functions.
This isn't ideal, but there isn't much to do in JS to avoid this.
It is something to take into consideration when you write callback-y code though (e.g. don't create a function in your main loop by mistake, etc.)

 

[Chaosy]

Bind seems like a easy and comfy way to do things, I will try it.