关于javascript：es6类和带有事件处理程序的“this”

es6 classes and “this” with event handlers

本问题已经有最佳答案，请猛点这里访问。

玩一些ES6游戏，遇到了一个我不确定如何解决的问题。考虑以下内容

1
2
3
4
5
6
7
8
9

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

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

在watch的内部，this是预期的window对象。但是我怎么称呼Foo？目前我用bind this.watch.bind(this)来解决这个问题，但是我想知道是否有一种更"合适"的ES6方法来解决这个问题。

相关讨论

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

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

Ps：假设您知道如何在javascript中定义this，那么您可以在没有别名的情况下使用它，比如self或类似的东西，尽管这是一种常见的做法。

处理这一问题的纯ES6方法(在我看来)是使用新的代理对象。实现过程如下所示：

1
2
3
4
5
6
7
8
9
10
11

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

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

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

不过，我将包括一个babelpl示例，这里是免责声明：babelpl不支持代理对象。Kangax的兼容性表显示了各种JavaScript引擎的支持。