Javascript 非法调用jQuery HTML5音频播放 背景

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

问题 调用

fnPlay

时，我收到一个

非法调用

错误

//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);
});

问题:

---

有人能解释为什么我不能在变量

fnPlay

中存储

play（）

函数并调用

fnPlay（）

，但我可以存储对象并调用对象上的

play（）

函数吗？

这是因为JavaScript函数的上下文是如何工作的。函数中的上下文（或

此

）是在运行时设置的，而不是在设置时设置的

当您调用

lastAudioObj.play（）时

，则在

lastAudioObj

的上下文中调用

play（）

函数。在

play（）

内部，

这是
lastAudioObj
，所以一切正常

但是，当您执行
fnPlay（）
时，它没有上下文<代码>此

函数内部将为

空

（或

窗口

）

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();

---

其基础是

this

reference。。。。