非法調用jQuery的HTML5音頻播放

Question

背景

基本上，這個代碼將所有音頻標籤頁面上，當一個完成它開始在DOM下一個。

的問題

當fnPlay叫我收到Illegal Invocation錯誤。

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

問題

任何人都可以解釋爲什麼我不能店內的play()功能我的變量fnPlay，並呼籲fnPlay()，但我可以存儲對象，並調用該對象的play()功能？

Answer 1

這是因爲JavaScript函數的上下文是如何工作的。在功能內的上下文（或this）在運行時設置，而不是在設置時。

當您撥打lastAudioObj.play();時，將在lastAudioObj的上下文中調用play()函數。裏面的play(),this是lastAudioObj，所以一切正常。

但是，當你做fnPlay()但是，它沒有上下文。 this裏面的功能將會是null（或window）。 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();