舉例說明js立即執行函式的寫法有哪些？

王铁柱6發表於2024-12-08
JS函式

JS立即執行函式表示式 (IIFE - Immediately Invoked Function Expression) 有幾種常見的寫法，它們的核心思想都是建立一個函式表示式，然後立即執行它。以下是幾種寫法及示例：

1. 使用圓括號包裹函式表示式:

這是最常見的一種寫法，用一對圓括號 () 包裹函式表示式，然後在末尾新增另一對圓括號 () 來立即執行它。

(function() {
  console.log("Hello from IIFE!");
})();

2. 使用一元運算子:

可以使用一元運算子，例如 !、+、-、~ 等，將函式表示式轉換為表示式，然後立即執行。

!function() {
  console.log("Hello from IIFE!");
}();

+function() {
  console.log("Hello from IIFE!");
}();

-function() {
  console.log("Hello from IIFE!");
}();

~function() {
  console.log("Hello from IIFE!");
}();

3. 使用void運算子:

void 運算子會計算表示式並返回 undefined。

void function() {
  console.log("Hello from IIFE!");
}();

帶引數的IIFE:

所有上述寫法都可以傳遞引數給IIFE：

(function(name) {
  console.log("Hello, " + name + "!");
})("World"); // 輸出: Hello, World!


!function(a, b) {
  console.log(a + b);
}(1, 2); // 輸出: 3

ES6中的箭頭函式:

雖然箭頭函式本身不能直接作為IIFE使用，但是可以將其用圓括號包裹起來實現同樣的效果：

(() => {
  console.log("Hello from IIFE using arrow function!");
})();

void (() => {
    console.log("Another IIFE with arrow function");
})();

選擇哪種寫法？

雖然以上幾種寫法都能實現相同的功能，但最常見和推薦的寫法是使用圓括號 () 包裹函式表示式。這種寫法清晰易懂，並且被廣泛接受為IIFE的標準寫法。 使用一元運算子的寫法較為簡潔，但可讀性略遜一籌。

IIFE 的作用:

  • 建立私有作用域: IIFE 最主要的作用是建立私有作用域，避免變數汙染全域性名稱空間。在IIFE內部定義的變數和函式不會洩漏到全域性作用域。
  • 避免命名衝突: 在多人協作開發時，使用IIFE可以有效避免命名衝突。
  • 建立模組: IIFE 可以用來建立模組化的程式碼，將相關的程式碼封裝在一個獨立的單元中。

希望這些例子能幫助你理解JS立即執行函式的各種寫法。

相關文章