本人在接触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>