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

This question already has an answer here:

这个问题在这里已有答案：

How to access the correct `this` inside a callback? 6 answers
如何在回调中访问正确的`this`？ 6个答案

playing around with some es6 and ran into an issue i'm not sure how to solve. consider the following

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

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

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

Inside of watch, this is the window object, as expected. But how do i refer to Foo? Currently I get around this with bind this.watch.bind(this) but i'd love to know if there is a more "proper" ES6 way to get this going.

在手表内部，这是窗口对象，正如预期的那样。但我怎么称Foo？目前我通过bind this.watch.bind（这个）来解决这个问题，但是我想知道是否有更“适当”的ES6方式来实现这一目标。

3 个解决方案

#1

You can use arrow function.

您可以使用箭头功能。

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value.

与函数表达式相比，箭头函数表达式（也称为胖箭头函数）具有更短的语法，并且词汇绑定此值。

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

#2

The class keyword is just a syntatic sugar for the known javascript prototype inheritance chain. The way the this attribution mechanism works is the same. Just keep thinking about the class as the good old function what works with this, so it can be attributed to the one that used the new keyword.

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

E6 comes with lots of new keywords to make object oriented javascript more familiar. I'm happy with that but we all must remember that the fundamental parts are still the same, just now with some shadows for newcomers :D

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

Ps: Given that you know how this is defined in Javascript, you can use it without an alias, like self or something like that, despite that beeing a common practice.

Ps：鉴于你知道如何在Javascript中定义它，你可以使用它而不需要别名，比如self或类似的东西，尽管这是一种常见的做法。

#3

A pure ES6 way to handle this (in my opinion) would be to use the new Proxy object. The implementation would look something like this:

一个纯ES6方式来处理这个（在我看来）将使用新的Proxy对象。实现看起来像这样：

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

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

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

I would have included a Babel REPL example, however, here is the disclaimer: Babel REPL does not support the Proxy object. Kangax's compatibility table shows support in various Javascript engines.

我会包含一个Babel REPL示例，但是，这里是免责声明：Babel REPL不支持Proxy对象。 Kangax的兼容性表显示了对各种Javascript引擎的支持。

#1