I just wanted to know if its acceptable to save a reference to "this" as a variable and then use that in an eventListener. If not can someone please inform as to the best practice for passing reference to a different context in javascript.

Example:

someListener(){
    let self = this; //referencing this class
    
    someObject.addEventListener("click"), function(){
       //some magic applied here
       self.someArray.push("something");
    }
}

I cant think of another way to reference a different context (that of the class that the event listener belongs to) when dealing with an event.

Thanks

I just wanted to know if its acceptable to save a reference to "this" as a variable and then use that in an eventListener. If not can someone please inform as to the best practice for passing reference to a different context in javascript.

Example:

someListener(){
    let self = this; //referencing this class
    
    someObject.addEventListener("click"), function(){
       //some magic applied here
       self.someArray.push("something");
    }
}

I cant think of another way to reference a different context (that of the class that the event listener belongs to) when dealing with an event.

Thanks

• javascript

Share Improve this question Follow edited Jan 3, 2021 at 11:47 Paul Hashmi asked Jan 3, 2021 at 11:34 Paul HashmiPaul Hashmi 46677 silver badges2020 bronze badges 2

• If you pass the event listener an arrow function then self is not needed. – evolutionxbox Commented Jan 3, 2021 at 11:35
• But this approach is also acceptable and widely used in pre-ES6 codes... – FZs Commented Jan 3, 2021 at 11:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

That's fine, and highly idiomatic ES5 (using the name that is also mon).

ES6 gives us arrow functions which use a lexical this instead of having their own.

someListener(){
    someObject.addEventListener("click"), () => {
       //some magic applied here
       this.someArray.push("something");
    }
}

Before arrow functions were introduced, this was a mon way among javascript developers but now you can get around this problem using an arrow function

someListener(){
    someObject.addEventListener("click"), () => {
       this.someArray.push("something");
    }
}

Using an arrow function solves this problem because arrow functions do not get their own binding of this. They get their value from the enclosing scope, which in your case is the local scope of someListener function.