iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

我的JavaScript日常系列 第 29

JavaScript Day 29. 立即函式 IIFE

立即函式,也稱 Immediately Invoked Function Expression,簡稱 IIFE,是一個在宣告的當下就會馬上被執行的函式。

立即函式寫法

function IIFE() {}

這邊我們有一個函式,假如我們不想要透過呼叫就讓它立刻執行,可以有兩個作法:

  • 這個函式最外面加上一個小括號。
  • 在函式的大括號後面加上一個小括號。

可以這麼編寫

(function IIFE() {
  console.log("立即函式");
})();

或者是

(function IIFE() {
  console.log("立即函式");
})();

以上得到的結果是一樣的。

另外,立即函式無法在函式外被再次執行:

(function IIFE() {
  console.log("立即函式");
})();

console.log(IIFE); //跳錯

限制變數作用域

假如今天我們在一個多人團隊裡,某個人在文件中創建一個函式,另一個人在文件中不小心取了同名的函式,這時兩個文件都包含在同一個網頁中,由於函數名稱相同,於是造成全域受到污染,IIFE 就可以避免這個問題。

function greet() {
    console.log('Hello'); 
}

function greet() {
    console.log('Hey'); 
}

greet() // Hey

可以看到現在有兩個同名的函式,目前的狀態來說第一個會被第二個覆蓋,那麼如果我們不希望它被覆蓋呢?接下來的範例會以 IIFE 的概念來編寫:

function greet() {
    console.log('Hello'); 
}

(function greet() {
    console.log('Hey'); 
})(); // "Hey"

greet() // Hello

這個範例的意思是,我們把第二個函式放在括號中,使這個函式成為 IIFE,現在他有自己的作用域,因此不會污染到其他區域,' Hello ' 也就不會被覆蓋。


立即函式可以用來減少全域變數的使用,因為在 IIFE 中的變數是區域變數,所以很常被使用來包裝只會被執行一次或是初始化的程式碼。

跟一般的函式一樣,IIFE 也可以傳參數進去:

(function (w, d, $) {

   // w 是一個局部變數,指向 window 物件
   // d 是一個局部變數,指向 document 物件
   // $ 是一個局部變數,指向 jQuery 物件
   
}(window, document, jQuery));

我們將全域變數 window, document, jQuery 當成參數傳遞進去並立即執行函式,除了可以在函式中使用不同的變數名稱,還能使程式效能稍微提升,因為 JavaScript 找變數的時候,會先找區域變數,區域變數找不到才會往全域變數尋找。


IIFE 也可以有返回值:

// 將立即執行函數的返回值,指定給 foo 變數
var foo = (function () {

    // 回傳 object
    return {
        hello: function () {
            return 'Hello';
        }
    };
}());

alert(foo.hello()); // Hello

參考資料:

JS 核心觀念筆記 - 立即函式 IIFE
JavaScript 立即執行函數 IIFE (Immediately Invoked Function Expression) / Self-invoking Function


上一篇
JavaScript Day 28. Callback Function ( 回呼函式 )
下一篇
JavaScript Day 30. 關於 JavaScript 中的 This
系列文
我的JavaScript日常31

尚未有邦友留言

立即登入留言