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