微信小程序 - 调用微信 API 回调函数内拿不到 this 问题（解决方案）

前言

在微信 API 回调函数内 this 指向的是微信 API，所以拿不到 this.data.* / this.* 值。

比如，下面这段代码（回调函数内访问this.data.*）就会报错：

<button bindtap="go">测试</button>

Page({

  data: {
    message:'我是this上的值'
  },

  /*
  * 事件处理
  */
  go: function() {
    wx.showModal({
      title: '提示',
      success (res) {
        if (res.confirm) {

          // 这里的this值为: undefined
          console.log(this);//undefined
          
          // 所以这里拿不到data,更拿不到message
          console.log(this.data.message)//Error

        }
      }
    })
  }
})

解决方案

ES6 箭头函数（ ()=>{} ）同样可以解决该问题。

最简单直接的办法，就是在 “外部” 提前定义接收 this，具体请看下方改进后的代码：

Page({

  data: {
    message:'我是this上的值'
  },

  /*
  * 事件处理
  */
  go: function() {

    // 接收this
    var _this = this;

    wx.showModal({
      title: '提示',
      success (res) {
        if (res.confirm) {

          // 再次尝试
          console.log(_this.data.message)//我是this上的值

        }
      }
    })
  }
})