不能直接将 [audio].play() 作为 jQuery 回调

Question

考虑这个代码：

var music = $("audio")[0];
//doesn't work
$("#pbutton").click(music.play);
//works
$("#pbutton").click(function(){music.play()});

不起作用的行在 Firefox 中返回此错误：

TypeError: 'play' called on an object that does not implement interface HTMLMediaElement.

我在这里错过了什么吗？为什么这不起作用？

更新：我为此做了一个小提琴。

Answer 1

这实际上很简单。我已经更新了你的小提琴来展示它。

var x = {
    play: function()
    { 
        console.log(this);
    }
};

$(document).ready(function()
{
    var music = document.getElementById("song");

    $("#play").click(function()
    {
        x.play();
    });

    $("#play").click(x.play);

    $("#pause").click(music.pause);
});

查看代码和您的开发人员控制台。在第一个单击处理程序中，您调用对象x的函数play。由于这是“正常”调用，因此函数中的this是x 对象，这是正确的。

作为第二个单击处理程序，您直接指向x.play函数。但由于 jQuery 维护了用作单击处理程序的函数的 this 上下文，因此函数中的this现在是播放按钮。

现在，如果您的 play 函数中的某些内容使用this-variable，您会收到错误（因为在您的play函数中，您假设这是您的x-object）。这就是为什么您经常必须将匿名函数包装在无参数函数调用周围才能使其工作的原因。