JavaScript 自執行函式

自執行函式

自執行函式是在定義時立即執行的 JavaScript 函式。要定義自執行函式，可以將匿名函式用括號括起來，然後後面再跟一對括號。這些函式也稱為自執行匿名函式。

第一對括號內的匿名函式基本上是用函式表示式定義的函式。因此，自執行函式也稱為立即呼叫函式表示式 (IIFE)。

語法

在 JavaScript 中定義自執行函式的語法如下：

(function () {
   // function body
})();

函式定義包含在一對括號中。末尾的第二對括號執行該函式。

另一種語法如下：

(function () {
   // function body
}());

第一種語法更清晰。

示例

在下面的示例中，我們使用自執行函式在輸出中列印訊息。

<html>
<body>
   <p id = "output"> </p>
   <script>
      (function () {
	     document.getElementById("output").innerHTML = 
	     "Self-invoked function is executed!";
      }());
   </script>
</body>
</html>

輸出

Self-invoked function is executed!

帶引數的自執行函式

您可以建立帶引數的自執行函式，並將引數傳遞給它。常見的做法是傳遞對全域性物件的引用，例如 window 等。

(function (paras) {
   // function body
})(args);

paras 是匿名函式定義中的引數列表，args 是傳遞的引數。

示例

在下面的示例中，我們建立了一個帶引數 name 的匿名函式。我們向其傳遞了一個引數。

<html>
<body>
   <div id = "demo"></div>
   <script>
      const output = document.getElementById("demo");
      (function (name) {
         output.innerHTML = `Welcome to ${name}`;
      })("Tutorials Point !");
   </script>
</body>
</html>

輸出

Welcome to Tutorials Point !

自執行函式的私有作用域

自執行函式內定義的任何程式碼都保留在私有作用域中，不會汙染全域性作用域。因此，開發人員可以使程式碼更清晰，並消除命名衝突等錯誤。此外，自執行函式的程式碼仍然隱藏，其他程式碼部分無法訪問。

示例

在下面的示例中，我們在函式外部或內部定義了變數 'a'。在外部定義的變數是全域性變數，在函式內部定義的變數是私有變數，僅限於自執行函式的作用域。

此外，我們還列印了函式內部和外部變數的值。使用者可以在輸出中觀察變數的值。

透過這種方式，我們可以避免命名衝突。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const output = document.getElementById("output");
      let a = 10;
         (function () {
            output.innerHTML += "Entering to the function <br/>";
            var a = 20;
            output.innerHTML += "The value of a is " + a + "<br>";
            output.innerHTML += "Exiting to the function <br/>";
         }());
         output.innerHTML += "The value of the outside the function is " + a;
    </script>
</body>
</html>

輸出

Entering to the function
The value of a is 20
Exiting to the function
The value of the outside the function is 10

示例

在某些情況下，需要在函式外部訪問自執行函式的變數。在這種情況下，我們可以使用 'window' 物件將該變數設為全域性變數，如下所示，並在全域性作用域中訪問該變數。

<html>
<body>
   <div id = "output"> </div>
   <script>
      (function () {
         var string = "JavaScript";
         window.string = string;
      })();
      document.getElementById("output").innerHTML =
	  "The value of the string variable is: " + string;
   </script>
</body>
</html>

輸出

The value of the string variable is: JavaScript

可以使用 call() 或 apply() 方法訪問自執行函式的私有作用域。

使用自執行函式的好處

避免全域性作用域 - 開發人員可以使用自執行函式避免變數和函式的全域性作用域，有助於避免命名衝突並使程式碼更易於閱讀。
初始化 - 自執行函式可用於變數的初始化。
程式碼私有性 - 程式設計師可以防止其他程式碼部分訪問自執行函式的程式碼。

列印頁面