играл с некоторыми es6 и столкнулся с проблемой, я не уверен, как ее решить. рассмотрим следующее
class Foo {
constructor ( ) {
window.addEventListener('scroll', this.watch);
}
watch ( ) {
console.log(this);
}
}
Внутри watch, this - объект window, как и ожидалось. Но как я могу обратиться к Foo? В настоящее время я обойду это со связью this.watch.bind(this), но мне бы хотелось узнать, есть ли более "правильный" способ ES6 для этого.
Вы можете использовать функцию стрелки.
Функция arrow function (также известная как функция толстой стрелки) имеет более короткий синтаксис по сравнению с выражением функции и лексически связывает это значение.
window.addEventListener('scroll', () => this.watch());
Ключевое слово class - это просто синтаксический сахар для известной цепи наследования прототипов javascript. Способ работы этого механизма атрибуции одинаков. Просто продолжайте думать о классе как о доброй старой функции, что с этим работает, поэтому его можно отнести к тому, которое использовало ключевое слово new.
E6 поставляется с множеством новых ключевых слов, чтобы сделать объектно-ориентированный javascript более знакомым. Я доволен этим, но мы все должны помнить, что фундаментальные части все те же, только теперь с тенями для новичков: D
Ps:
Учитывая, что вы знаете, как this определяется в Javascript, вы можете использовать его без псевдонима, например self или что-то в этом роде, несмотря на то, что это обычная практика.
Чистый способ 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.