箭头函数对this的绑定

本人在接触VUE项目的时候，用vue-resource做接口请求时，写法常常如下：

// 传统写法

this.$http.get('/someUrl', [options]).then(function(response){

// 响应成功回调

}, function(response){

// 响应错误回调

});

// Lambda写法

this.$http.get('/someUrl', [options]).then((response) => {

// 响应成功回调

}, (response) => {

// 响应错误回调

});

第一种的传统写法里面this的指向不明确，如果没有在外层函数声明：var that=this，二直接实用this，函数会报错，说this 是undefined；

第二种Lambda写法的箭头函数则是改变了this的指向，this执行函数的外层而并非函数本身。

所以之前一直困惑，有时候需要些var that=this，而有时候不写又不会报错，原来是因为以上的原因，是因为自己的请求写法不统一。

我真正明白这个问题的缘由是因为在处理react的函数引用的时候，以下是错误代码：

setNewNumber(){

this.setState({

data:this.state.data+1

})

}

render(){

return(

<div>

<button onClick={this.setNewNumber()} ></button>

</div>

);

}

以上这种写法是会导致报错，

只是因为this的指向存在问题，在setNewNumber函数下的this没有setState这个属性。

正确的写法如下：

<button onClick={()=>this.setNewNumber()}></button>