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

àì夳堔傛蜴生んèń 2022-11-30 04:20 335阅读 0赞

## 前言 ##

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

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

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
    
            }
          }
        })
      }
    })

![在这里插入图片描述][20200823162644599.gif_pic_cener]

## 解决方案 ##

> 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上的值
    
            }
          }
        })
      }
    })

[20200823162644599.gif_pic_cener]: /images/20221124/8db97bbb028d4c2e96b7cad2b6abd86a.png