在js中丢失的外部范围然后起作用

时间:2018-06-08 14:59:43

标签: react-native ecmascript-6

我是React Native和ES6的新手。我可以在这段代码中访问外部范围'this':

my_function()
{
    this.setState = {};//outer scope this

    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => {
        console.log(this); //this shows the correct outer scope this
        return response.json()})
      .then(...);

}     

但如果我把这个箭头函数写成:

 return fetch('https://facebook.github.io/react-native/movies.json')
        .then(function(response){
           console.log(this); //this becomes some 'DedicatedWorkerGlobalScope' when I am debugging?
           return response.json();
        }).then(...)

我不明白为什么这两个功能不相同?

1 个答案:

答案 0 :(得分:1)

因为箭头功能会自动绑定。

如果你想得到相同的结果,你应该写:

return fetch('https://facebook.github.io/react-native/movies.json')
    .then(function(response){
       console.log(this); //this becomes some 'DedicatedWorkerGlobalScope' when I am debugging?
       return response.json();
    }.bind(this)).then(...)

我在函数关闭“}”之后添加了“.bind(this)”。