IIFE,即 Immediately Invoked Function Expression,指的是立即執行的函式表示式。它在定義函式的同時立即執行。
舉例說明:
// 經典的 IIFE 寫法,使用括號包裹函式表示式並立即執行
(function() {
var message = "Hello from IIFE!";
console.log(message); // 輸出 "Hello from IIFE!"
})();
// 另一種寫法,使用 void 運算子
void function() {
var message = "Hello from another IIFE!";
console.log(message); // 輸出 "Hello from another IIFE!"
}();
// 使用箭頭函式的 IIFE
(() => {
var message = "Hello from arrow function IIFE!";
console.log(message); // 輸出 "Hello from arrow function IIFE!"
})();
// 帶引數的 IIFE
(function(name) {
console.log("Hello, " + name + "!"); // 輸出 "Hello, World!"
})("World");
IIFE 的好處:
-
建立私有作用域,避免命名衝突: JavaScript 在 ES6 之前沒有塊級作用域,只有函式作用域。IIFE 可以建立一個獨立的作用域,防止其內部的變數汙染全域性作用域,避免與其他指令碼或庫的變數命名衝突。 這在多人協作開發或引入第三方庫時尤為重要。
-
避免變數提升帶來的問題: JavaScript 的變數提升機制有時會導致難以理解的行為。IIFE 可以將變數限制在其內部作用域,避免變數提升帶來的意外。
-
建立模組化的程式碼: IIFE 可以將相關的程式碼封裝在一個獨立的單元中,形成簡單的模組。這有助於提高程式碼的可讀性、可維護性和可重用性。 雖然現在有了 ES Modules,但在一些老專案或者需要相容舊版瀏覽器的場景下,IIFE 仍然有用。
-
一次性執行程式碼: IIFE 可以在定義後立即執行,適合用於初始化一些變數、執行一些只需要執行一次的邏輯,例如:
var counter = (function() { var count = 0; return function() { return ++count; }; })(); console.log(counter()); // 輸出 1 console.log(counter()); // 輸出 2
這個例子利用 IIFE 建立了一個閉包,用於維護一個私有的計數器變數
count
,每次呼叫counter()
函式都會使計數器加 1。
總而言之,IIFE 是一種強大的技術,可以幫助開發者編寫更乾淨、更模組化、更易於維護的 JavaScript 程式碼。 雖然 ES6 引入了塊級作用域 (let, const) 和模組化機制,在很多場景下可以替代 IIFE,但理解 IIFE 的原理仍然對理解 JavaScript 作用域和閉包的概念至關重要。