解決this.setData is not a function、this.setData寫在setTimeout裏報錯、this的作用域

修改前：

setTimeout(function () {
   this.setData({
      index: "1"
   })
}, 3000)

修改後：(在setTimeout方法外層先定義var that = this;)

var that = this;
setTimeout(function () {
   that.setData({
      index: "1"
   })
}, 3000)

思考：爲什麼如此呢？？？

感謝作者：fozero，參考來源：http://www.cnblogs.com/fozero/p/7841488.html

在微信小程序中我們一般通過以下方式來修改data中的數據

this.setData({
      index1: e.detail.value
    })

比如在函數裏面修改數據

bindFaChange1: function (e) {
    this.setData({
      index1: e.detail.value
    })
  }

但是當我們通過wx.request請求網絡數據成功後綁定數據時候報以下錯誤

this.setData is not a function

代碼如下：

doCalc:function(){
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        if (res.data.code == 0){
          this.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

這是因爲this作用域指向問題 ，success函數實際是一個閉包 ， 無法直接通過this來setData

那麼需要怎麼修改呢？

我們通過將當前對象賦給一個新的對象

var _this = this;

然後使用_this 來setData就行了

完整代碼

doCalc:function(){
    var _this = this;
    wx.request({
      url: url,
      method:'POST',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function (res) {
        if (res.data.code == 0){
          _this.setData({
            maxCount: res.data.maxCount
          });
        }
      }
    })
  }

另外說一下 ， 在es6中 ， 使用箭頭函數是不存在這個問題的

例如 ：

setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)

當我們使用箭頭函數時，函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
並不是因爲箭頭函數內部有綁定this的機制，實際原因是箭頭函數根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層代碼塊的this。