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