舉例說明什麼是IIFEs？它有什麼好處？

王铁柱6發表於2024-11-23

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 的好處：

  1. 建立私有作用域，避免命名衝突： JavaScript 在 ES6 之前沒有塊級作用域，只有函式作用域。IIFE 可以建立一個獨立的作用域，防止其內部的變數汙染全域性作用域，避免與其他指令碼或庫的變數命名衝突。 這在多人協作開發或引入第三方庫時尤為重要。

  2. 避免變數提升帶來的問題： JavaScript 的變數提升機制有時會導致難以理解的行為。IIFE 可以將變數限制在其內部作用域，避免變數提升帶來的意外。

  3. 建立模組化的程式碼： IIFE 可以將相關的程式碼封裝在一個獨立的單元中，形成簡單的模組。這有助於提高程式碼的可讀性、可維護性和可重用性。 雖然現在有了 ES Modules，但在一些老專案或者需要相容舊版瀏覽器的場景下，IIFE 仍然有用。

  4. 一次性執行程式碼： 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 作用域和閉包的概念至關重要。

相關文章