这个ES6箭头函数和常规函数的区别？

Question

ES6还是个新手，所以试图理解下面这两个函数之间存在差异的原因。我正在使用React，并且注意到在编写设置状态的非ES6函数时出现错误。这发生在componentDidMount中。

这样在ES6工作并返回我需要什么：

(pos) => this.setState({ 
    lat: pos.coords.latitude, 
    lng: pos.coords.longitude, 
    }) 

然而，这种方式会引发错误 - “遗漏的类型错误：this.setState是不是一个函数”

function(pos) { 
    this.setState({ 
     lat: pos.coords.latitude, 
     lng: pos.coords.longitude 
    }) 
    } 

这些不完全一样吗？任何人都可以解释为什么它会抛出这个错误？

下面是代码从反应类，以提供更多的上下文：

var GeolocationExample = React.createClass({ 
    getInitialState: function() { 
    return { 
     lat: '', 
     lng: '', 
    }; 
    }, 

    componentDidMount: function() { 
    navigator.geolocation.getCurrentPosition(

     // Where I'm placing each of the above mentioned functions, 

     (err) => alert(err.message), 
    ); 
    }, 

    render: function() { 
    return (
     <View> 
     <Text> 
      <Text style={styles.title}>Initial position: </Text> 
      {this.state.lat} 
     </Text> 
     <Text> 
      <Text style={styles.title}>Current position: </Text> 
      {this.state.lng} 
     </Text> 
     </View> 
    ); 
    } 
}); 

任何和所有的帮助表示赞赏。谢谢！

Answer 1

不，他们不一样。箭头函数自动绑定到创建它们的上下文中。 这意味着，

(x) => this.stuff = x 

是（大部分）等效于：

(function(x) { 
    return this.stuff = x; 
}.bind(this)) 

箭头功能也将保留arguments，super和在其内部创建它的功能的new.target。

这意味着

(function a() { 
    const u =() => console.log(arguments); 
    u("whatever"); 
})("a args"); 

将打印出类似这样["a args"]。

有关更多信息，请参见here。

Answer 2

Lexical this

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

From : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这就是为什么，当你写：

this.setState = function() {}; 
function(pos) { 
    this.setState({ 
     lat: pos.coords.latitude, 
     lng: pos.coords.longitude 
    }) 
    } 

在this.setState的this内部功能设置为{}（空物体）。

当你用=>符号写相反，这是与功能外，这相当于共享：

this.setState = function() {}; 
var self = this; 
function(pos) { 
    self.setState({ 
     lat: pos.coords.latitude, 
     lng: pos.coords.longitude 
    }) 
    } 

，或者您也可以使用function(pos){ /* Stuff here */ }.bind(this);