问题描述
在学习微信小程序的开发过程中,发现在回调函数中无法使用this
对象
重现问题
wx.request({
....
success(res) {
console.log(this);
},
fail(res){
}
})
问题分析
运行这个代码,在程序中会报错,提示并不存在this
变量,这是由于success回调函数指向了闭包,导致内部无法只用当前作用域中的this
对象。
解决方案一(推荐)
针对这个问题,我首先想到了箭头函数() => {}
,由于箭头函数没有自己的this对象,内部的this就是定义时上层作用域中的this。
通俗来讲,就是将success改成箭头函数,那当在success中使用this,就可以指向上层函数的作用域,而上层就是wx.request
在这层是存在this
对象的。
将上面的代码改成箭头函数即可轻松解决这个问题
wx.request({
....
success: (res) => {
console.log(this);
},
fail(res){
}
})
解决方案二
认真学习箭头函数的特性,利用箭头函数来解决问题。当然,使用箭头函数来解决并不是唯一解,你还可以通过在上层作用域提前接收this
变量,然后再使用。
wx.request({
....
const _this = this;
success(res) {
console.log(this);
},
fail(res){
}
})
解决方案三
直接换成async/await 的风格,当然这是进阶的做法