Question

玩一些es6并遇到问题我不知道如何解决。请考虑以下

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

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

在watch内，this是window对象，正如预期的那样。但我如何参考Foo？目前我用bind this.watch.bind(this)解决了这个问题，但我很想知道是否有更“适当”的ES6方法来实现这一目标。

Answer 1

您可以使用箭头功能。

arrow function表达式（也称为胖箭头函数）有一个与函数表达式相比较短的语法和词法绑定这个值。

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

Answer 2

class关键字只是已知javascript原型继承链的一种合成糖。这种归因机制的工作方式是一样的。只是继续把这个类看作是一个很好的旧函数，因为它可以归结为使用new关键字的那个。

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

PS：鉴于您知道如何在Javascript中定义this，您可以在没有别名的情况下使用它，例如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);
    }
}

我会包含一个Babel REPL示例，但这里是免责声明：Babel REPL does not support the Proxy object。 Kangax的兼容性表格显示support in various Javascript engines。

es6类和带有事件处理程序的“this”

3 个答案: