Javascript 简明教程

JavaScript - Self-Invoking Functions

Self-Invoking Functions

自调用函数是 JavaScript 函数，在定义时会立即执行。要定义自调用函数，你可以将匿名函数括在圆括号内，后面跟另一组圆括号。这些函数也称为自执行匿名函数。

位于第一对圆括号内的匿名函数实际上是使用函数表达式定义的函数。所以，自调用函数也称为立即可调用的函数表达式 (IIFE)。

Syntax

在 JavaScript 中定义自调用函数的语法如下 −

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

函数定义包含在圆括号对中。结尾处的第二个圆括号对执行函数。

另一种语法如下 −

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

第一个语法更加清晰。

Example

在下例中，我们使用自执行函数打印输出中的消息。

<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!

Self-Invoking Functions with Parameters

可以创建带有参数的自调用函数，并向其中传递参数。向全局对象（如 window 等）传递引用是一种常见做法。

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

paras 是匿名函数定义中的参数列表，而 args 是传递的参数。

Example

在以下示例中，我们创建了一个带有参数名称的匿名函数。我们已向其传递了一个参数。

<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 !

Private Scope of Self-Invoking Functions

在自执行函数中定义的所有代码都保留在私有作用域中，不会污染全局作用域。因此，开发人员可以使代码清晰，并消除命名冲突等错误。此外，自调用函数的代码仍然是隐藏的，其他部分代码无法访问。

Example

在以下示例中，我们在函数之外或函数内部定义变量“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

Example

在某些情况下，需要在函数外部访问自执行函数的变量。在这种情况下，我们可以使用 '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() 方法访问自调用函数的私有作用域。

Benefits of Using the Self-Invoking Functions

  1. Avoiding the global scope - 开发人员可以使用自调用函数避免使用变量和函数的全局作用域，有助于避免命名冲突，并使代码更具可读性。

  2. Initialization - 自执行函数可用于变量的初始化。

  3. Code privacy - 程序员可以通过代码的其他部分避免访问自执行函数的代码。