JavaScript - 自调用函数

自调用函数

自调用函数是定义后立即执行的 JavaScript 函数。要定义自调用函数，可以将一个匿名函数括在括号中，然后再括上另一组括号。这些函数也称为自执行匿名函数。

第一对括号内的匿名函数本质上是一个用函数表达式定义的函数。因此，自调用函数也称为立即调用函数表达式 (IIFE)。

语法

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

(function () {
    // 函数主体
})();

函数定义括在一对括号内。末尾的第二对括号执行该函数。

另一种语法如下 -

(function () {
    // 函数主体
}());

第一种语法更清晰。

示例

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

<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) {
    // 函数主体
})(args);

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

示例

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

<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() 方法访问自调用函数的私有作用域。

使用自调用函数的好处

• 避免全局作用域 − 开发人员可以使用自调用函数避免变量和函数的全局作用域，从而避免命名冲突并提高代码的可读性。

• 初始化 − 自执行函数可用于初始化变量。

• 代码隐私 − 程序员可以避免代码的其他部分访问自执行函数的代码。