es6 classes and “this” with event handlers [duplicate]

Answer 1

The class keyword is just a syntatic sugar for the known javascript prototype inheritance chain. The way the this attribution mechanism works is the same. Just keep thinking about the class as the good old function what works with this, so it can be attributed to the one that used the new keyword.

E6 comes with lots of new keywords to make object oriented javascript more familiar. I'm happy with that but we all must remember that the fundamental parts are still the same, just now with some shadows for newcomers :D

Ps: Given that you know how this is defined in Javascript, you can use it without an alias, like self or something like that, despite that beeing a common practice.

Answer 2

You can use arrow function.

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value.

window.addEventListener('scroll', () => this.watch());

Answer 3

A pure ES6 way to handle this (in my opinion) would be to use the new Proxy object. The implementation would look something like this:

class Foo {
    constructor() {
        let proxy = new Proxy(this, this.watch);

        window.addEventListener('scroll', proxy);
    }

    watch(e) {
        console.log(this, e.target);
    }
}

I would have included a Babel REPL example, however, here is the disclaimer: Babel REPL does not support the Proxy object. Kangax's compatibility table shows support in various Javascript engines.