javascript - 非法调用jQuery HTML5音频播放

Question

背景

基本上，此代码获取页面上的所有音频标记，当一个标记完成时，它会在 DOM 中启动下一个标记。

问题

当 fnPlay 被调用时，我收到一个 Illegal Invocation 错误。

//THIS CODE FAILS
var lastAudio = null;
$('audio').each(function(index) {
    var fnPlay = $(this)[0].play;
    if (lastAudio != null) {
        lastAudio.bind("ended", function() {
            fnPlay(); 
        });
    }
    lastAudio = $(this);
});

现在我确定其余代码没问题，因为下面的代码有效。

//WORKS GREAT!
var lastAudio = null;
$('audio').each(function(index) {
    var lastAudioObj = $(this)[0];
    if (lastAudio != null) {
        lastAudio.bind("ended", function() {
            lastAudioObj.play(); 
        });
    }
    lastAudio = $(this);
});

问题

谁能解释为什么我不能将 play() 函数存储在我的变量 fnPlay 中并调用 fnPlay()，但是我可以存储对象并调用对象上的 play() 函数吗？

Answer 1

这是因为 JavaScript 函数的上下文是如何工作的。函数内的上下文(或 this)是在运行时设置的，而不是在设置时设置的。

当您调用 lastAudioObj.play(); 时，play() 函数会在 lastAudioObj 的上下文中调用。在 play() 中，this 是 lastAudioObj，所以一切正常。

然而，当您执行 fnPlay() 时，它没有上下文。函数内的 this 将为 null(或 window)。 play() 不喜欢那样，所以它抛出异常。

有几种方法可以解决这个问题。

一种是通过.call()调用函数，手动设置上下文。

像这样设置变量:

var lastAudioObj = $(this)[0];
var fnPlay = lastAudioObj.play;

然后调用:

fnPlay.call(lastAudioObj);

您也可以在设置变量时使用.bind()来设置上下文。

var lastAudioObj = $(this)[0];
var fnPlay = lastAudioObj.play.bind(lastAudioObj);

然后你可以这样调用它:

fnPlay();