"This" in class class es6

Question

For some reason, I get weird values ​​for "this" in my es6 class ...

'use strict'; class Clicker { constructor(element) { this.count = 0; this.elem = element; this.elem.addEventListener('click', this.click); // logs Clicker { count:0, elem: button#thing} as expected console.log(this); } click() { // logs <button id="thing">...</button> as unexpected... console.log(this); this.count++; } } var thing = document.getElementById('thing'); var instance = new Clicker(thing); 

 <button id="thing">Click me</button> 

Question:

Why does "this" inside the Clickers' click method refer to the dom node and not to itself?

More importantly, how can I refer to the count property for Clickers from its click method if I cannot use "this" for this?

Answer 1

Why does "this" inside the Clickers click method refer to the dom node and not ... itself?

Since the specification for .addEventListener() is to set the this pointer to the DOM element that caught the event. This is how it is designed to work.

---

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

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

Explanation:

All function calls in Javascript set a new this value according to how the function is called. See this explanation for more information on this basic rule set.

Also, when you do this:

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

You simply get the this.click method and pass this method only addEventListener() . The value of this will be completely lost. 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); 

In addition, .addEventListener() specifically designed to set its own this value when it calls a callback (to point this to the element that creates the event).

So, you can use .bind() as shown above to force the correct this value when calling the method.

---

For reference, you can find this description of six ways to configure this for a useful function call in Javascript.

---

Other options

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

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

or in ES6, arrow function:

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

The arrow function will store the this value so that you automatically avoid using the self link used in the previous example.