uni之this作用域

目錄介紹

• 01.先看一個案例
• 02.看一下解決方案

• 代碼如下所示
  • 發現了點選按鈕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的。

• 可以發現這樣操作就可以解決作用域問題
• 第一種解決方案
  • 解決辦法就是在閉包之外先把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');
          }
      });
  },