Получение 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/