Javascript .apply()應用實例

之前談過this與Closure,當時JS前輩Ammon提到了apply與call。今天在寫程式時剛好有機會用到,便順手整理了一下。

一般我們呼叫Function時,都會寫成funcName(arg1, arg2, ...)的形式。但像jQuery裡的事件函數,都用this來存取觸發事件的元素,若想由程式自行呼叫這些事件函數,就只能由元素去trigger()事件。傳統funcName()的呼叫方式,因無法指定this,顯然就無法滿足這種情境下的需求。

apply()call()是Function型別的兩個Method,apply()的語法是funcName.apply(thisArg, argsArray),第一個傳入的參數在就是函數中的this,而第二個參數則可傳一個參數陣列給該函數。call()與apply()用途相同,唯一的差別在於,call()必須一一明列出參數,例如funcName.call(thisArg, arg1, arg2, ...)。

底下是個例子,我寫了一個Button Click事件,其中用了this.value去取Button的顯示文字,並做一些後續的處理。範例裡只是個alert,但如果這些處理邏輯很複雜,我們想應用在Button Click以外的其他用途,依正統的程式架構設計,應將這段邏輯拆出來變成獨立函數,這樣子就可以被Button Click事件以及其他程式所共用。

但如果函數是執行期間動態指定的,或者你只是臨危受命加兩行程式救火(火燒屁股時還堅持做Refactoring應該會被蓋布袋),此時apply()就可以幫上大忙。在以下的例子裡,我假造了一顆"偽"按鈕,由於btnClick中只會用到this.value,我就宣告一個value屬性充數。就這樣,沒有Button也能享用Button Click事件囉!

<script type='text/javascript'>
$(function() {
function btnClick() {
    alert("Button[" + this.value + "] clicked!");
}
$("#a").click(btnClick);
var virtualButton = { value: "V" };
btnClick.apply(virtualButton);
});
</script>
</head><body>
<input type="button" value="A" id="a" />
</body>
歡迎推文分享:
Published 10 April 2009 10:53 AM 由 Jeffrey
Filed under: ,
Views: 29,758



意見

# Dave said on 19 November, 2009 09:31 AM

解釋的非常清析,簡潔.

# 遊子 said on 18 August, 2015 11:36 PM

一個字: 垃圾

# 受益良多 said on 23 August, 2017 01:31 AM

那是兩個字

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<April 2009>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication