收藏
回答

自定义组件methods中的this指向

问题模块
API和组件

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自身上,求指点。

最后一次编辑于  2017-11-30  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

6 个回答

  • LastLeaf
    LastLeaf
    2017-11-30

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


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

    2017-11-30
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-11-30

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


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

    2017-11-30
    赞同
    回复
  • 漫无止境
    漫无止境
    2017-12-01

    谢谢答复。

    我之前关于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指向问题。


    2017-12-01
    赞同
    回复
  • LastLeaf
    LastLeaf
    2017-12-01

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


    先关闭了。

    2017-12-01
    赞同
    回复
  • 课博
    课博
    2017-12-02

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

    2017-12-02
    赞同
    回复
  • 小程序开发
    小程序开发
    2018-01-14

    大神们,

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

    2018-01-14
    赞同
    回复