ES6 中 `this` 的范围类

Question

我正在努力理解 this 如何在 ES6 classes 中工作，这使得构建具有任何一致性的应用程序变得困难。这是我在 React class:

中感到困惑的一个例子

class Class extends React.Component {

    constructor() {

        super();

        this.state = {
            timeout: 0
        }
    }

    componentWillMount() {

        // Register with Flux store.
        // On change run this._storeUpdated()
    }

    _storeUpdated() {

        if (this.state.timeout < 3) {
            console.log(this.state.timeout); // 0
            setTimeout(() => {
                this.setState({
                    authorized: false,
                    timeout: this.state.timeout + 1 // undefined?
                });
                // Force Flux store to update - re-runs this method.
            }, 1000)
        }
    }
}

为什么 this.state.timeout undefined 在对 setState() 的调用中？但是，如果我使用箭头功能该方法，那么它就可以工作：

_storeUpdated = () => {

    if (this.state.timeout < 3) {
        console.log(this.state.timeout); // 0
        setTimeout(() => {
            this.setState({
                authorized: false,
                timeout: this.state.timeout + 1 // 1
            });
            // Force Flux store to update - re-runs this method.
        }, 1000)
    }
}

这里到底发生了什么？

Answer 1

您可能会感到困惑，因为 React 在使用 React.createClass 时会自动绑定，但在从 React.Component 继承时不会（即 ES6 方式）。 0.13 beta1 blog post.

中解释了此更改

在您的特定情况下，由于您使用的是 Flux.getStore('store').on('change', this._storeUpdated);（method on EventEmitter3, as used by Flummox），上下文设置为 EventEmitter 对象，与您的组件对象没有 state 属性。

注意你可以在注册事件监听器时指定this的值作为第三个参数：Flux.getStore('store').on('change', this._storeUpdated, <this-object>);

要在 ES6 类中实现自动绑定，您应该使用 React 博客 post 中描述的任何方法。作为旁注，如果你喜欢 ES7，你甚至可以使用 autobind decorator.

ES6 中 `this` 的范围类

The scope of `this` in ES6 classes

ecmascript-6

reactjs

ecmascript-2016

ES6 中 `this` 的范围 类

The scope of `this` in ES6 classes

ecmascript-6

reactjs

ecmascript-2016

ES6 中 `this` 的范围类