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