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');
}
});
},
豌豆资源搜索网站https://55wd.com 电脑刺绣绣花厂 ttp://www.szhdn.com
第二种解决方案
使用箭头函数也可以解决该问题,思考一下这是为什么?
changeTitle4(){
uni.setStorage({
key: 'storage_key',
data: 'hello',
success:() => {
this.title = "改变标题4";
console.log('changeTitle2------success');
}
});
},