问题背景简介
写小程序上传头像时,
首先,通过点击事件绑定showActionSheet()方法显示更换头像的弹框,同时使用了uniapp的api
uni.chooseImage(从本地相册选择图片或使用相机拍照。)
由于在给后端传图片时需要转换为base64格式,因此在里面还要调用函数pathToBase64
由于以上的层层嵌套导致,虽然uni.request接口调用成功,但是转换失败,因为现在this.urlPaths已经找不到了(undefined)
问题原因
以上bug出现的原因就是由于
嵌套函数中的this不会从外层函数中继承
例子
举一个简单的栗子
var myObj = {
myName: "jiale",
showThis: function(){
console.log(this.myName); // 输出啥?
function bar(){
console.log(this.myName); // 输出啥?
}
bar();
},
};
myObj.showThis();
答案是:
-
jiale
-
undefined
解决方案
方案一
通过that控制this指向
var myObj = {
myName: "jiale",
showThis: function(){
console.log(this.myName); // 输出啥?
let that = this;
function bar(){
console.log(that.myName); // 输出啥?
}
bar();
},
};
myObj.showThis();
这样就都输出jiale了
方案二
通过ES6的箭头函数
var myObj = {
myName: "jiale",
showThis: function(){
console.log(this.myName); // 输出啥?
const bar = () => {
console.log(this.myName); // 输出啥?
}
bar();
},
};
myObj.showThis();
这样也就都输出jiale了
这是因为箭头函数中的 this
取决于它的外部函数,即谁调用它 this
就继承自谁。
针对该问题的解决
通过方案一的方法,成功解决。
寻寻觅觅花了差不多有3个小时,然后收集资料,写文章用了2个小时,但是很值得!!下次遇到此类问题我绝对秒杀!!差不多600秒就可以!!
芜湖!!!成功解决!!!也祝大家好运都可以顺利解决