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

更新日期: 2024 年 9 月 14 日

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

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

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

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

函數的基礎

什麼是函數

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

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

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

函數的基本結構

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

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

例如:

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

在這個例子中,add 是函數的名稱,它接受兩個參數 xy,並返回它們的加總值(結果)。

呼叫函數

當函數被定義後,我們可以在程式的任何地方使用(呼叫)它:

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 的匿名函數,在許多情況下都顯得特別有用。以下列出了其中幾個主要的原因:

簡潔性

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

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

例如當我們使用陣列的一些內建方法,例如 mapfilter 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