先來看看 MDN 的定義。
回呼函式(callback function)是指能藉由 argument 通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。
所以我想像的是:
const foo1 = function(){...};
const foo2 = function(){...};
foo2(foo1);
根據 008 所敘述,其實 callback function 跟一般函式沒什麼不同,差別在於被呼叫執行的時機;JavaScript 是一個事件驅動(Event-driven)的程式語言,而事件驅動的概念是:
事件被觸發(Event fired)->處理事件(Event handler)
拿生活上的事件來舉例:
門鈴響->開門,一般來說我們會依照事件的執行順序來寫程式碼,所以會先寫 action1 門鈴響,然後再接著 action2 開門:
function action1() {
console.log("Doorbell ringing");
}
function action2() {
console.log("Open the door");
}
action1();
action2();
// Doorbell ringing
// Open the door
如上例所說,若想讓事件先發生(也就是 action1),就會把程式碼寫在前面,如果是透過 callback function 來改寫,會把函式當作參數傳進另一個函式:
function action1(callback) {
console.log("Doorbell ringing");
callback();
}
function action2() {
console.log("Open the door");
}
action1(action2);
// Doorbell ringing
// Open the door
為什麼要學 callback function? 因為在 array.methods 的參數會使用到 callback function,例如:array.prototype.map
、array.prototype.filter
以後有遇到再說,先醬~