箭头函数对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(

);

}

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


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


正确的写法如下:

你可能感兴趣的:(箭头函数对this的绑定)