微信小程序中回调函数无法使用this对象

问题描述

在学习微信小程序的开发过程中，发现在回调函数中无法使用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 的风格，当然这是进阶的做法