获取 DedicatedWorkerGlobalScope 而不是 Constructor

Question

当我在 onScroll 处理程序中打印 this 时，我得到 DedicatedWorkerGlobalScope 而不是 Constructor。

var Frame = React.createClass({
    _handleScroll: (ev) => {
        console.log(this) //DedicatedWorkerGlobalScope
    },
    render: function() {
        return (
            <ScrollView
                ref='scrollViewH'
                onScroll={this._handleScroll}>
                {items}
            </ScrollView>
        );
    }
});

如果我使用内联函数处理滚动，这会正常工作：

var Frame = React.createClass({
    render: function() {
        return (
            <ScrollView
                ref='scrollViewH'
                onScroll={(ev) => {
                    console.log(this) //Constructor
                }}>
                {items}
            </ScrollView>
        );
    }
});

绑定这个不起作用。

onScroll={this._handleScroll.bind(this)}

Answer 1

当我以旧方式（没有 ES6 箭头函数）重写回调声明时，它按预期工作。为什么这样？！！！！如果有人知道，请给我一个答案。

var Frame = React.createClass({
    _handleScroll: function(ev) {
        console.log(this); //Constructor
    },
    render: function() {
        return (
            <ScrollView
                ref='scrollViewH'
                onScroll={this._handleScroll}>
                {items}
            </ScrollView>
        );
    }
});

Answer 2

当您使用箭头函数声明时，您使用的是与变量 'Frame' 在同一级别可用的 'this'，因为 es6 正在推断上下文。这在下面的文章中有解释，其中指出

[Arrow functions] have implicit return and most importantly, they always use the value of this from the enclosing scope

这篇文章对绑定语法在 ES6 中的工作原理以及如何获得预期的行为给出了相当不错的解释：

https://www.sitepoint.com/bind-javascripts-this-keyword-react/

获取 DedicatedWorkerGlobalScope 而不是 Constructor

Getting DedicatedWorkerGlobalScope instead of Constructor

scrollview

react-native