iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

從零開始的JS學習之路系列 第 21

[Day21] 回呼函式 Callback Function

先來看看 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.maparray.prototype.filter 以後有遇到再說,先醬~

參考資料

008天重新認識JavaScript
回呼函式-MDN


上一篇
[Day20] 參數(下)
下一篇
[Day22] 計時器 setTimeout()
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言