我如何将数据传递给onStateChange事件处理程序与Youtube iframe API

Question

我正在为一个网站构建一个带有Javascript的小型视频播放器。我有一个JSON视频列表。我用

实例化我的播放器

var Videoplayer = new myVideoPlayer(data);

因为列表包含来自Vimeo和YouTube的视频，我想在这个对象中处理这两个api。里面有如下函数:

setVideo(videoId)

选择并播放视频，或

markVideoAsSelected(video)

在html中添加类。到目前为止，一切都很顺利，但我现在遇到了困难。当我通过API加载YouTube播放器时，我添加了:

events : {
    'onStateChange': self.YTonStateChange
}

我想要的一切都被绑定到Videoplayer实例我在开始创建。在状态更改时，我运行如下命令:

YTonStateChange : function(e){
    var self = this
    switch(e.data){
        //Video ended code 0
        case 0:
            setTimeout(self.switchToNextVideo, 3000);
        break;
    }
}

:

this现在绑定到YouTube API的事件，我丢失了我的对象。我不知道，我怎么能把我的对象实例与事件一起传递给事件处理程序?里面有我需要进一步处理的东西，我怎么才能把它找回来?

Answer 1

就像这样将上下文绑定到'self':

events : {
    'onStateChange': self.YTonStateChange.bind(self)
}

它将在YTonStateChange回调中强制'this'值为'self'。希望有帮助;)

Answer 2

为了以防万一，除了R. Foubert之外，自ECMAScript 2015以来还可以使用箭头函数:

YTonStateChange: e => {
    switch(e?.data) {
        case 0: {
            setTimeout(this.switchToNextVideo, 3000);
            return;
        }
        default:
            break;
    }
}