uniapp之this作用域
01.先看一个案例
代码如下所示
发现了点击按钮1可以更新title内容，但是点击按钮2却无法更新title内容。这个究竟是为什么呢？
<template>
<view class="container">
<text>{{title}}</text>
<button type="default" @click="changeTitle1">改变标题内容按钮1</button>
<button type="default" @click="changeTitle2">改变标题内容按钮2</button>
</view>
</template>
<script>
export default{
data(){
return{
title : "这个是标题",
}
},
methods:{
changeTitle1(){
this.title = "改变标题1";
},
//可以发现下面这个执行了success方法，但是调用this赋值却无法改变内容
changeTitle2(){
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
this.title = "改变标题2";
console.log('changeTitle2------success');
}
});
},
}
}
</script>
<style>
.container{
display: flex;
flex-flow: column;
}
</style>
为什么changeTitle2无法改变title内容
在changeTitle2方法的success方法中，该success方法指向闭包，所以this属于闭包，由此在success回调函数里是不能直接使用this.title的。
02.看一下解决方案
可以发现这样操作就可以解决作用域问题
第一种解决方案
解决办法就是在闭包之外先把this赋值给另一个变量
//可以发现这样操作就可以解决作用域问题
changeTitle3(){
//赋值
var me = this;
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
me.title = "改变标题3";
console.log('changeTitle2------success');
}
});
},
第二种解决方案
使用箭头函数也可以解决该问题，思考一下这是为什么？
changeTitle4(){
uni.setStorage({
key: 'storage_key',
data: 'hello',
success:() => {
this.title = "改变标题4";
console.log('changeTitle2------success');
}
});
},本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
