微信小程序中this指向作用域問題this.setData is not a function報錯

在微信小程序中我們一般通過以下方式來修改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。

作者：fozero
聲明：原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/7841488.html
標簽：前端,微信小程序,ES6