uni之this作用域

目录介绍

• 01.先看一个案例
• 02.看一下解决方案

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');
  	    }
  	});
  },