2024-08-27 Javascript IIFE（立即執行函式表達式，Immediately Invoked Function Expression）

發表於 分類於 閱讀次數：
2024-08-27 Javascript IIFE（立即執行函式表達式，Immediately Invoked Function Expression）

IIFE（立即執行函式表達式，Immediately Invoked Function Expression）是一種在 JavaScript 中定義並立即執行的函式。這種模式通常用來創建一個獨立的作用域，以避免污染全域命名空間，或是用來創建閉包。

IIFE 的基本語法
IIFE 的語法結構如下：

1
2
3
4
5
(function() {
    // 這裡是函式的主體
    console.log("這個函式立即執行");
})();

逐步解釋

1. 函式表達式： 
1
2
3
(function() {
    console.log("這個函式立即執行");
})

. 這裡的 function() 是一個匿名函式（沒有名稱），我們把它包在小括號裡，使其成為函式表達式，而不是函式聲明。

  1. 立即執行：

    1
    ();

    . 小括號 () 用來立即調用這個函式。當 JavaScript 引擎解析到這裡時，會立即執行這個函式表達式。

  2. 整體結構：

    1
    2
    3
    4
    (function() {
        console.log("這個函式立即執行");
    })();

    . 將這兩部分結合起來，函式在定義後立即被執行。

IIFE 的用途

1. 避免變數污染全域命名空間：IIFE 在其自己的作用域內運行，變數不會泄露到外部作用域，因此不會干擾全域變數。 
1
2
3
4
5
6
7
(function() {
    let temp = "I'm inside IIFE";
    console.log(temp);
})();

// console.log(temp); // 這裡會報錯，因為 temp 不在全域作用域內

  1. 創建閉包：IIFE 可以用來創建閉包，以保持某些變數的狀態。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const counter = (function() {
        let count = 0;
        return function() {
            count++;
            console.log(count);
        };
    })();

    counter(); // 輸出 1
    counter(); // 輸出 2

  2. 模組模式：IIFE 可以用來創建模組，將功能封裝起來，並只暴露需要的接口。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const myModule = (function() {
        let privateVar = "I'm private";

        function privateMethod() {
            console.log(privateVar);
        }

        return {
            publicMethod: function() {
                privateMethod();
            }
        };
    })();

    myModule.publicMethod(); // 輸出 "I'm private"

    總結

    IIFE 是一種強大的工具，能夠在 JavaScript 中創建獨立的作用域、保護變數、以及實現閉包等功能。這種模式在模組化編程、避免命名衝突、和處理異步行為時特別有用