微信小程序中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