Question

当我在onScroll处理程序中打印 this 时，我得到了 DedicatedWorkerGlobalScope 而非构造函数。

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

当您使用箭头功能声明时，您正在使用＆＃39;这个＆＃39;与变量＆＃39; Frame＆＃39;处于同一级别，因为es6正在推断上下文。这在下面的文章中解释，其中说明了

[箭头函数]有隐式返回，最重要的是，它们总是使用封闭范围中 this 的值

本文给出了一个相当不错的解释，即ES6中的绑定语法如何工作以及如何获得预期的行为：

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

Answer 2

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

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

获取DedicatedWorkerGlobalScope而不是Constructor

2 个答案: