小程序中的this和that

刚接触小程序不久，学习的过程中，在调用小程序api成功（success）或失败（fail）的回调函数时经常遇到设置this.setData()的属性更新数据报错，通过查阅网上资料和阅读前辈们的demo了解到其中的原由以及两种解决方法，具体如下。

方法一：复制一份当前对象 var that = this;

• 代码：调用小程序 wx.getSystemInfo({}) 后，在 success 方法里直接使用this设置数据

onLoad: function () {
    wx.getSystemInfo({
      success: function(res) {
        this.setData({   // 直接使用this设置数据
          maskWidth: res.windowWidth - 30,
        });
      },
      fail: function(err) {
        console.log(err);
      }
    });
}

• 运行代码，这时我们发现报错了
  

  屏幕快照 2018-05-07 上午11.01.46.png

• 这样修改就可以了

onLoad: function () {
    var that = this; // 1. 将this对象复制到临时变量that
    wx.getSystemInfo({
      success: function(res) {
        that.setData({  // 2. 用临时变量that调用setData()方法，进行数据更新
          maskWidth: res.windowWidth - 30,
        });
      },
      fail: function(err) {
        console.log(err);
      }
    });
}

• 原因:
  在javascript语言中，this代表着当前对象，会随着程序执行过程中的上下文而改变。在 wx.getSystemInfo({}) 方法的回调函数中，对象已经发生改变，所以已经不是 wx.getSystemInfo({}) 方法对象了，自然data里边的属性也就不复存在了。

方法二：将回调函数换一种声明方式，则可以直接使用this.setData()

onLoad: function () {
    wx.getSystemInfo({
      success: res => { // 
        this.setData({
          maskWidth: res.windowWidth - 30,
        });
      },
      fail: err => {
        console.log(err);
      }
    });
}

注：除了上面例子外，几乎所有小程序api都有 success、fail和complete 回调函数来处理业务的后续逻辑，很多时候我们要获取当前页面对象来对视图进行渲染。当我们想要获取页面的初始数据 data时候，在回调函数里面就不能使用 this.data来获取，同样的就不能使用this.setData()函数来渲染视图。我们需要做的就是把我们想要的this对象复制到临时变量that。希望能够帮助正在学习微信小程序开发的开发者。

参考资料：
https://blog.csdn.net/mdzzzhangxian/article/details/60966040