【问题标题】:Getting DedicatedWorkerGlobalScope instead of Constructor获取 DedicatedWorkerGlobalScope 而不是构造函数
【发布时间】:2016-06-28 07:53:19
【问题描述】:

当我在 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>
        );
    }
});

绑定 this 不起作用。

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

【问题讨论】:

  • 我在示例应用程序中得到了正确的行为:rnplay.org/apps/otiPug 尝试隔离事物,其他东西一定会改变上下文。

标签: react-native scrollview


【解决方案1】:

当您使用箭头函数声明时,您使用的是与变量“Frame”处于同一级别的“this”,因为 es6 正在推断上下文。这在下面的文章中进行了解释,其中指出

[箭头函数]具有隐式返回,最重要的是,它们始终使用封闭范围内的 this 的值

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

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

【讨论】:

    【解决方案2】:

    当我以老式方式(没有 ES6 箭头函数)重写回调声明时,它按预期工作。为什么这样?!!!!如果有人知道,请给我一个答案。

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

    【讨论】:

    • 有关箭头函数作用域上下文的详细信息以及发生这种情况的原因,请参阅我的答案
    猜你喜欢
    • 2019-03-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-25
    • 2022-11-21
    • 2013-10-14
    • 2021-12-25
    相关资源
    最近更新 更多