不能直接将 .play（）作为jQuery回调

考虑以下代码：

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维护了你用作click处理程序的函数的this-context，所以函数中的this现在是play-button。

现在，如果你的play-function中的某些东西使用了这个变量 ，你会得到错误（因为在你的play函数中你假设这是你的x对象 ）。 这就是为什么你经常需要围绕无参数函数包装匿名函数的原因 – 调用使它工作。