es6 классы и «это» с обработчиками событий

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Я включил бы пример Бабель REPL, однако, здесь является отказ от ответственности: Babel REPL does not support the Proxy object. Таблица совместимости Kangax показывает support in various Javascript engines.