ES6类和带有事件处理程序的“this”[重复]

Question

玩一些es6，遇到了一个问题，我不知道如何解决

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

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

在watch的内部，这是窗口对象，正如预期的那样。但是，我如何引用Foo？目前我用bindthis.watch.bind（this）解决了这个问题，但我想知道是否有一种更“合适”的ES6方法来实现这一点。

Answer 1

在我看来，处理这个问题的纯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对象。angax的兼容性表显示了对各种Javascript引擎的支持。

Answer 2

class关键字只是已知javascript原型继承链的一个语法糖。这种归因机制的工作方式是相同的。只要把这个类看作是一个很好的旧函数，它与这个函数一起工作，因此它可以归因于使用new关键字的类。

E6附带了许多新的关键字，使面向对象的javascript更加熟悉。我对此很高兴，但我们都必须记住，基本部分仍然是一样的，只是现在有一些新来者的阴影： D

ps：鉴于你知道这个代码在Javascript中是如何定义的，你可以在没有别名的情况下使用它，比如自代码或类似的东西，尽管这是一种常见的做法。

Answer 3

您可以使用箭头功能。

arrow函数表达式（也称为fat arrow函数）与函数表达式相比具有更短的语法，并在词汇上绑定此值。

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