Es6 и "this" с обработчиками событий

играл с некоторыми es6 и столкнулся с проблемой, я не уверен, как ее решить. рассмотрим следующее

class Foo {
 constructor ( ) {
   window.addEventListener('scroll', this.watch);
 }

 watch ( ) {
   console.log(this);
 }
}

Внутри watch, this - объект window, как и ожидалось. Но как я могу обратиться к Foo? В настоящее время я обойду это со связью this.watch.bind(this), но мне бы хотелось узнать, есть ли более "правильный" способ ES6 для этого.

Ответы

Ответ 1

Вы можете использовать функцию стрелки.

Функция arrow function (также известная как функция толстой стрелки) имеет более короткий синтаксис по сравнению с выражением функции и лексически связывает это значение.

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

Ответ 2

Ключевое слово class - это просто синтаксический сахар для известной цепи наследования прототипов javascript. Способ работы этого механизма атрибуции одинаков. Просто продолжайте думать о классе как о доброй старой функции, что с этим работает, поэтому его можно отнести к тому, которое использовало ключевое слово new.

E6 поставляется с множеством новых ключевых слов, чтобы сделать объектно-ориентированный javascript более знакомым. Я доволен этим, но мы все должны помнить, что фундаментальные части все те же, только теперь с тенями для новичков: D

Ps: Учитывая, что вы знаете, как this определяется в Javascript, вы можете использовать его без псевдонима, например self или что-то в этом роде, несмотря на то, что это обычная практика.

Ответ 3

Чистый способ ES6 справиться с этим (на мой взгляд) будет состоять в использовании нового прокси-объекта. Реализация будет выглядеть примерно так:

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

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

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

Я бы включил пример Babel REPL, однако здесь есть отказ от ответственности: Babel REPL не поддерживает объект Proxy. Таблица совместимости Kangax показывает поддержку в различных механизмах Javascript.