自定义组件methods中的this指向
发布于 7 年前 作者 pingma 19017 次浏览 来自 问答

app.js中：

globalData: {
  audioContext: wx.getBackgroundAudioManager()
},

自定义组件中component.js：

  methods: {
    showAudio: function () {
      app.globalData.audioContext.onPlay(() => {
        this.togglePlay()

      })

      //app.globalData.audioContext.onPlay(function () {
      //  this.togglePlay()
      //})

     //app.globalData.audioContext.onPlay(this.togglePlay)

    },
    togglePlay: function () {
      console.log('playing', this)
      this.setData({
        playing: true
      })
    }
}

onPlay等函数如果不用箭头函数，则togglePlay内的this会变成togglePlay自身，而不是外部的组件本身，从而无法setData。

但是在一个页面中page.js：

showAudio: function () {
    // app.globalData.audioContext.onPlay(function () {
    //   this.toggleAudioPlay
    // })
    // app.globalData.audioContext.onPlay(() => {
    //   this.toggleAudioPlay
    // })
    app.globalData.audioContext.onPlay(this.toggleAudioPlay)

  },

toggleAudioPlay: function () {
    console.log('audio play', this)
    this.setData({
      playing: true,
      paused: false
    })
  },

实际上这三种写法都一样，this总是指向page自身，可以setData.

所以自定义组件的methods中的this为什么和page中的不一样呢？

箭头函数会将this绑定在定义时的对象上，所以this指向组件自身，这个还可以理解。

不过不用箭头函数时自定义组件为什么会将this绑定到callback自身上，求指点。

6 回复

这个事实上是个js语言的问题。Page定义的方法会有一次 .bind(this) 调用，所以表现会有点不一样。

先关闭了。

大神们，

getBackgroundAudioManager这个在设置src时，用base64的音频资源，你们用过没有？我这里src如果设置成链接，可以播放。但是如果设置成base64的音频资源就不行。。。。求解

在自定义组件中，this指向代表 该组件自身实例 的对象，这也是在不用箭头函数时的表现。

使用箭头函数时，this等同于它的父级scope的this，这就是另一回事了。methods定义段中的大多数函数是不应该写成箭头函数的。

为什么要管它指向哪？我反正是每个function的第一句就是 let that = this

app.globalData.audioContext.onPlay(this.togglePlay)

注意到了你的这一句。这样调用的话 this 是由 audioContext 提供的，应该不是你所想要的 this 。

谢谢答复。

我之前关于page的描述有误，在page中可以用箭头函数：

app.state.audioContext.onPlay(() => {
      this.toggleAudioPlay()
    })

但是也可以这么做（在自定义组件中不行）：

app.globalData.audioContext.onPlay(this.toggleAudioPlay)

但是不能这么写：

app.state.audioContext.onPlay(function () {
      this.toggleAudioPlay()
    })

对于audioContext这种情况，始终用箭头函数应该是没错的。

另外，我觉得用onPlay=callback比onPlay(callback)更符合习惯一些，可能也会避免这儿的this指向问题。

回到顶部