“This” within es6 class method [duplicate]

by

Why is the “this” inside of of the Clickers’ click method referring to
the dom node rather than … itself?

Because the specification for .addEventListener() is to set the this pointer to the DOM element that caught the event. That’s how it is designed to work.

When passing a method as a callback where you want to override the value of this, you can use .bind() to force the desired value of this with it:

this.elem.addEventListener('click', this.click.bind(this));

Explanation:

All function calls in Javascript set a new value of this according to how the function is called. See this explanation for further info on that basic set of rules.

On top of that, when you do this:

this.elem.addEventListener('click', this.click);

You are just getting the this.click method and passing that method alone to addEventListener(). The value of this will be completely lost. It’s as if you are doing this:

var m = this.click;     // m here is just a reference to Clicker.prototype.click
this.elem.addEventListener('click', m);

On top of this, .addEventListener() is specifically built to set it’s own value of this when it calls the callback (to point this at the element creating the event).

So, you can use .bind() as shown above to force the proper value of this to be in place when your method is called.

For reference, you may find this description of the six ways that this is set for a function call in Javascript to be useful.

Other Options

I find .bind() to be the clearest way of defining this, but you could also use either a local anonymous function:

var self = this;
this.elem.addEventListener('click', function() {
    self.click();
});

or in ES6, an arrow function:

this.elem.addEventListener('click', () => this.click());

The arrow function will preserve the value of this for you automatically to avoid needing the self reference used in the prior example.

More Related Contents:

  1. What does “this” refer to in arrow functions in ES6?
  2. Private properties in JavaScript ES6 classes
  3. ES6 class variable alternatives
  4. ES6 modules: Export single class of static methods OR multiple individual methods
  5. Call static methods from regular ES6 class methods
  6. Arrow Functions and This [duplicate]
  7. How to extend a class without having to use super in ES6?
  8. JavaScript – Owner of “this”
  9. Declaring static constants in ES6 classes?
  10. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  11. ES6 classes : what about instrospection?
  12. Javascript ES6 class definition not accessible in window global
  13. ES6 Dynamic class names
  14. this value in JavaScript anonymous function
  15. Override a setter, and the getter must also be overridden
  16. Getting a list of statics on an ES6 class
  17. What are getters and setters for in ECMAScript 6 classes?
  18. Why aren’t methods of an object created with class bound to it in ES6?
  19. JS call static method from class
  20. How to add mixins to ES6 javascript classes?
  21. How to bind methods when destructuring an object in JavaScript?
  22. ES6 – declare a prototype method on a class with an import statement
  23. Javascript call() & apply() vs bind()?
  24. Is it possible to import modules from all files in a directory, using a wildcard?
  25. Call async/await functions in parallel
  26. How to import jquery using ES6 syntax?
  27. es6 import for side effects meaning
  28. Error: How to serialize data from getStaticProps : Next.js
  29. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  30. functional way to iterate over range (ES6/7) [duplicate]

Leave a Comment