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

Question

考虑这段代码:

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

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

TypeError: 'play' 在未实现接口(interface) HTMLMediaElement 的对象上调用。

我是不是漏掉了什么？为什么这行不通？

更新:我做了一个fiddle为此。

Answer 1

其实很简单。 I've updated your fiddle显示它。

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 现在是播放按钮。

现在，如果你的播放函数中的某些东西使用了this-variable，你会得到错误(因为在你的play函数中你假设this 是您的 x-object)。这就是为什么您经常必须将匿名函数包装在无参数函数调用周围以使其工作的原因。