快速入門：JavaScript匿名函數(Anonymous function)新手教學

By徐培鈞
LinkedIn

更新日期： 2023 年 10 月 26 日

JavaScript 是一門熱門的程式語言，「匿名函數」則是其中的一個重要特性。

但對剛入門學習寫程式的人來說，此設計可能會讓人難以理解。

本文希望能幫助你，清晰理解並能夠實際應用JavaScript的匿名函數。

我們將從基礎開始，逐步介紹其在程式中的應用，並透過實例來加深理解。

函數的基礎

什麼是函數

函數是 JavaScript 中一個重要的概念。

它允許我們將一段程式碼封裝起來，並賦予它一個名稱，這樣我們可以在往後程式中多次呼叫它。

函數可以接受參數（輸入值），處理這些資料，並返回一個結果（輸出值）。

函數的基本結構

在 JavaScript 中，函數可以使用 function 關鍵字來定義：

function 函數名稱(參數1, 參數2, ... ) {
    // 函數內容
    return 結果; // 可選
}

例如：

function add(x, y) {
    return x + y;
}

在這個例子中，add 是函數的名稱，它接受兩個參數 x 和 y，並返回它們的加總值（結果）。

呼叫函數

當函數被定義後，我們可以在程式的任何地方使用（呼叫）它：

let result = add(5, 3);
console.log(result); // 輸出 8

透過呼叫函數，我們可以重複利用程式碼、減少重複，並使我們的程序更容易閱讀和維護。

匿名函數是什麼

在 JavaScript　中，除了我們剛剛介紹過的「具名函數」（named function）外，還有一種稱為「匿名函數」（Anonymous function）的函數。

從字面上來理解，「匿名函數」就是沒有名字的函數。

這意味著它們在被定義時，不需要一個明確的函數名稱。

如何建立匿名函數

在 JavaScript 中，創建匿名函數的過程實際上非常簡單。

  1. 定義匿名函數

    你可以使用 function 關鍵字來創建一個匿名函數，與創建一個普通的具名函數一樣，只是省略了函數名稱。匿名函數的基本語法如下： 

    function(參數1, 參數2, ...) {
  // 函數內容
  return 結果; // 可選
}

  2. 將匿名函數指派給變數（選填）

    我們可以將匿名函數指派給一個變數，以便我們可以在往後的程式碼中使用它： 

    let myFunction = function(x, y) {
  return x + y;
};

    在這個例子中，我們將一個匿名函數指派給了變量 myFunction。該函數接受兩個參數 x 和 y，並返回它們的和。

  3. 調用匿名函數

    一旦我們有了一個匿名函數，無論是直接使用或者存儲在變量中，我們都可以調用它來執行它的程式碼： 

    let result = myFunction(5, 3);
console.log(result); // 輸出 8

    在這裡，我們選調用了剛剛創建的匿名函數，並將執行結果存儲在了result變數中，在將結果顯示到控制台上。

延伸閱讀：箭頭函數(arrow functions)是什麼？常見語法解析

為何需要匿名函數｜優點是什麼

JavaScript 的匿名函數，在許多情況下都顯得特別有用。以下列出了其中幾個主要的原因：

簡潔性

在需要快速定義並使用函數的情況下，匿名函數可以幫助我們省去為函數命名的時間。

這樣的函數定義方式，使我們的程式碼更加簡潔，更容易閱讀和理解。

例如當我們使用陣列的一些內建方法，例如 map、filter 和 reduce 等，我們通常需要將匿名函數作為參數，輸入到這些方法中：

let numbers = [1, 2, 3, 4, 5];

let squares = numbers.map(function(number) {
    return number * number;
});

console.log(squares); // 輸出 [1, 4, 9, 16, 25]

在這個例子中，我們傳遞了一個匿名函數到 map 方法中，這個匿名函數將每個數字平方，最後我們獲得了一個新的平方數字的陣列。

一次性的使用

在許多情況下，我們可能只需要在特定的地方使用一次函數。

例如在 JavaScript 的網頁開發中，我們常常需要使用事件監聽。

當某個事件（例如點擊、鍵盤輸入等）觸發時，我們希望執行某個函數。

這種情況下，匿名函數往往被廣泛使用：

document.querySelector('button').addEventListener('click', function() {
    console.log('按鈕被點擊了！');
});

在上述代碼中，我們為一個按鈕元素添加了一個點擊事件的監聽器。

當這個按鈕被點擊時，我們的匿名函數將被執行，並在控制台上顯示一則訊息。

匿名函數的常見問題｜缺點是什麼

雖然匿名函數在 JavaScript 中非常有用，但在使用它們時也可能會遇到一些問題。

以下列出了一些常見的問題，以及如何解決它們。

匿名函數的再利用性

由於匿名函數沒有名稱，因此我們無法在程式碼的其他地方再次調用它，除非我們將它儲存到一個變數中。

如果我們有一個可能在多段代碼中使用特定函數，則可能需要使用具名函數。

可讀性

雖然匿名函數可以讓我們的程式碼變得更簡潔。

但過度使用匿名函數，可能會降低程式碼的可讀性。

當我們的函數變得非常長或復雜時，我們應該考慮使用具名函數，並將其分解為多個較小的函數。

this 的值

在匿名函數中，this 的值可能並不是我們所期望的。

特別是當我們將匿名函數作為物件的方法或事件處理器時，this 的值將被綁定到全域對象（在瀏覽器中為 window），而不是我們所期望的物件。

我們可以使用 bind、call 或 apply 方法，或者使用箭頭函數（它不會創建自己的 this）來解決這個問題。

結語

匿名函數是 JavaScript 語言中的重要概念，它的靈活性和方便性使我們的程式碼更簡潔，更具可讀性。

在我們介紹的一些實例中，你可以看到匿名函數在各種情境下的實際應用，包括陣列操作、事件監聽。

儘管匿名函數在某些情況下可能存在一些問題，例如再利用性和 this 的值等，但透過內文提供的建議，你應該能夠有效地克服這些問題。

學習和理解匿名函數，將使你的 JavaScript 編碼技巧更上一層樓。

不論你是新手還是有經驗的開發者，我們都希望這篇文章能夠提供給你有用的資訊，並對你在使用匿名函數的旅程中提供指導。

Similar Posts