[筆記] 其實你早就在用closures了─談談closures和callback function

在看過前面幾篇關於closures的說明之後，不知道現在你是不是對於JavaScript中closures的概念有更清楚的概念和瞭解了呢？

如果還不清楚的話，可以先閱讀之前的文章喔！

[筆記] 談談JavaScript中closure的概念 -- Part 1
[筆記] 談談JavaScript中closure的概念 -- Part 2
[筆記] 談談JavaScript中closure的概念 -- Part 3
[筆記] 談談JavaScript中closure的概念 -- Part 4

在這篇文章中我們要來統整一下之前所學習到的概念，包括first class function、function expressions和closures，最後我們則會說明callback function的概念。

讓我們從一段程式例子看起

我們先寫一個名為SayHiLater的function，裡面會使用到setTimeout這個JavaScript中的內建函式，這個函式可以幫助我們延遲幾秒後才去執行另一個函式，裡面的3000，表示3000毫秒的意思，也就是3秒後幫我們執行裡面的那個function expression。（參考：setTimeout說明）

執行的結果如下，會在執行這段程式後3秒鐘出現以下畫面：

在執行這段程式的過程中，你是否了解到你已經用到了我們之前所提的function expressions和closures的概念了呢？

讓我們來重新看一下上面這段程式：

首先，在setTimeout裡面，我們在參數的地方建立了一個函式，這裡有兩個概念我們可以留意：第一，我們之所以可以直接把function當成參數代入setTimeout中，是因為在JavaScript中，function是屬於First Class Function，function就是一種物件，所以我們才可以直接把function放在參數中使用；第二，我們直接在參數的地方建立了一個參數，這是使用了Function Expression的特性，透過function expression建立了一個匿名函式。

複習：
[筆記] JavaScript中函式(Function)就是一種物件(Objects)─談談first class function
[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions

接著來看看setTimeout，還記得我們之前談到JavaScript中asynchronous callback事件運作的方式，它會先把所有execution context中的內容執行完後，才去執行這個觸發事件。所以當所有的execution context執行完畢後，setTimeout會等待3000毫秒，接著JavaScript引擎會去監控是否有任何觸發事件要產生，這時候，它就找到了我們要執行的這個匿名函式。

複習：[筆記] 談談JavaScript中的asynchronous和event queue

當執行這個匿名函式的時候，會需要使用到參數name和greeting，從前幾個關於closures的筆記我們可以知道，雖然SayHiLater這個函式的execution context已經從JavaScript引擎中抽離了，但是name和greeting這兩個變數仍然存在其記憶體位置上，所以透過closures仍然可以指稱到這兩個變數。

複習：[筆記] 談談JavaScript中closure的概念 -- Part 1

所以從這個例子中，我們就已經應用到了先前所學的first class function, function expressions, event queue, 和closures這樣的概念。

那我常用的jQuery呢？

如果你有使用過jQuery的經驗，那你一定看過這樣的寫法：

/*jQuery 使用到first class function和function expression*/
$("#button-01").click(function(){

})

你在click的這個事件中又放了function( ){ }，而這就是運用了first class function（把函式當成物件使用，因此才可以將函式代入參數的位置）和function expressions（直接在參數的位置寫入函式）的概念，另外，也使用了callback frunction的概念。

接著讓我們來看看callback function

什麼是callback function呢？
callback function指的是在一個function（例如，function A）中放入另一個function（例如，function B），而且當這個function A執行完後會觸發function B的執行。
讓我們看一個例子來了解callback function的概念。

在這裡我建立一個function名為CallBackYourName，同時代入參數callback。接著，在執行CallBackYourName的時候，我們在參數的地方代入function( ){ }，這時候就構成了一個callback function。

因為我給原本的CallBackYourName這個函式另一個函式，而CallBackYourName這個函式在執行完畢後，又會把我給它的這個匿名函式加以執行，而這就是callback function的概念！

程式範例

function SayHiLater(name){
 
 var greeting = 'Hello, ';
 
 setTimeout(function(){

  console.log(greeting + name);

 }, 3000);
}

SayHiLater('PJCHEN');


/*callback function*/
function CallBackYourName(callback){
 var Greeting = 'Here is some work...';
 callback();
}

CallBackYourName(function(){
 console.log('My name is PJCHEN');
});

→回到此系列文章目錄

資料來源：Understanding the Weird Part of JavaScript - Closures and Callbacks