微信小程序：与JavaScript的this有关的问题-优快云博客

在微信小程序开发中有一些函数中涉及到对page中data的数据进行修改(setData)，之前没有注意，常常就直接写作this.setData()，也没有考虑过this具体指的是什么，直到最近一次设置数据一直没有预期效果，反复排查后问题出在this上，发觉还是JavaScript的基础知识掌握不到位，于是又查阅资料重新学了一遍。

JavaScript中的this

首先明确，this指向的一定是一个对象，会根据运行环境的改变去改变指向。JavaScript支持运行环境动态切换，也即，this的指向是动态的，很难事先确定它的指向。详细用法可以参考知乎文章。

实际遇到的问题解决

下面则是具体讲述在微信小程序开发时遇到的问题以及如何解决的

首先附上代码，该代码的逻辑是用户点击页面的button按钮后，会触发button绑定的checkInfo函数，获取数据库中的图片并显示在页面。

 checkInfo(){
      const user=wx.getStorageSync('user')
      const that=this
      console.log(this)
      this.setData({
          pic:"bbbbb"
      })
//在数据库foodList中按照用户的id名查找
        wx.cloud.database().collection('foodList').where({
            opeartor: user.id
          }).get({
            success(res) {
            console.log("获取数据成功", res)
            const arrTar=res.data
          //   注意在这个代码里面this指代的对象已经发生变化，故应该先定义一个that保留之前的this指向（也即windows）

          // 下述代码成功实现对于page中定义的数据的修改
          
          that.setData({
              useList: that.data.useList.concat(arrTar),
              flag:false
          });

            },
            fail(res) {
              console.log("获取数据失败", res)
            }
          })
      

      }
  },

基于上述代码的处理逻辑，想要将相应的数据显示到页面上，首先要在page的data中定义相应的变量进行存储，例如代码中的（pic,useList,flag等变量）。注意在checkInfo大函数体内，用this.setData设置pic的值时没有问题，因为这里的this指向windows。执行console.log(this)后输出如下，可以看到这个对象里面包含了定义的各种函数，其中一个属性data可以帮我们获取到page的data中定义的各种数据，因此在这里可以正确改变pic的值为bbbbb。

而在设置数据（useList,flag）时，因为这条语句是在下面这个请求成功后执行的，此时this指向早就变了，此时console.log(this)会获取如下结果：

 wx.cloud.database().collection('foodList').where({
            opeartor: user.id
          }).get({
            success(res) {  //设置数据  

}})

也就是请求成功后的一个函数体，显然与上面的this有很大的差距，也没有看到data属性，因此使用this对象直接调用setData函数无法对data中的数据进行修改。这说明this的指向在上述代码执行的过程中已经改变了，那么如何解决呢？就是在this指向还未改变时拿另一个常量来保存当前的this指向，以便于后续this指向改变时调用。

所以这也是为什么在看别人代码总是会有const that=this,也是为了保留当前的this指向，方便后续的调用，此时在success之后的函数体内console.log(that)就会打印出和第一个this一样的结果。