"This" within es6 class method

javascript class ecmascript-6 this
Andrew Luhring picture Andrew Luhring · Apr 8, 2016 · Viewed 24.4k times · Source

For some reason I'm getting 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 is the "this" inside of of the Clickers' click method referring to the dom node rather than ... itself?

More importantly, how do I refer to Clickers' count property from within its' click method if I can't use "this" to do it?

Answer

jfriend00 picture jfriend00 · Apr 8, 2016

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.

Related questions

Call parent function which is being overridden by child during constructor chain in JavaScript(ES6)

I've encounter a problem below with JavaScript(ES6) class A{ constructor(){ this.foo(); } foo(){ console.log("foo in A is called"); } } class B extends A{ constructor(){ super(); this.foo(); } foo(){ console.log("foo in B is called"); } } What I expect …

Read More
ES6 class variable alternatives

Currently in ES5 many of us are using the following pattern in frameworks to create classes and class variables, which is comfy: // ES 5 FrameWork.Class({ variable: 'string', variable2: true, init: function(){ }, addItem: function(){ } }); In ES6 you can create classes natively, …

Read More
Private properties in JavaScript ES6 classes

Is it possible to create private properties in ES6 classes? Here's an example. How can I prevent access to instance.property? class Something { constructor(){ this.property = "test"; } } var instance = new Something(); console.log(instance.property); //=> "test"

Read More