考虑以下代码:
var music = $("audio")[0];
//doesn't work
$("#pbutton").click(music.play);
//works
$("#pbutton").click(function(){music.play()});
无效的行在Firefox中返回此错误:
TypeError:对未实现接口HTMLMediaElement的对象调用’play’.
我在这里错过了什么吗?为什么这不起作用?
解决方法:
这其实很简单. 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维护了你用作click处理程序的函数的this-context,所以函数中的this现在是play-button.
现在,如果你的play-function中的某些东西使用了这个变量,你会得到错误(因为在你的play函数中你假设这是你的x对象).这就是为什么你经常需要围绕无参数函数包装一个匿名函数的原因 – 调用使其工作.