Получение DedicatedWorkerGlobalScope вместо конструктора

Когда я печатаю этот внутри обработчика onScroll, я получаю 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)}

Ответ 1

Когда я переписал декларацию обратного вызова старым способом (без ES6 Arrow Functions), она работает так, как ожидалось. Почему так?!!!! Если кто-то знает, пожалуйста, дайте мне ответ.

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

Ответ 2

Когда вы используете объявление функции стрелки, вы используете 'this', доступный на том же уровне, что и ваша переменная "Frame", потому что es6 выводит контекст. Это объясняется в следующей статье, которая гласит:

[Функции стрелки] имеют неявный возврат и, самое главное, они всегда используют значение этого из охватывающей области

В статье дается довольно приличное объяснение того, как синтаксис привязки работает в ES6 и как получить ожидаемое поведение:

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