JavaScript - 自调用函数_JavaScript 菜鸟教程

自调用函数

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

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

语法

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

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

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

另一种语法如下 -

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

第一种语法更清晰。

例

在下面的示例中，我们使用 self-executing 函数在输出中打印消息。

<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 是传递的参数。

例

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

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

输出

Welcome to qikepu com !

自调用函数的私有范围

在自执行函数中定义的任何代码都保留在 private 范围内，并且不会污染全局范围。因此，开发人员可以使代码清晰并删除命名冲突等错误。此外，自调用函数的代码仍处于隐藏状态，代码的其他部分无法访问。

例

在下面的示例中，我们在函数外部或内部定义了变量 '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（）方法访问自调用函数的私有范围。

使用自调用函数的好处

避免全局范围 – 开发人员可以使用自调用函数避免变量和函数的全局范围，这有助于避免命名冲突并使代码更具可读性。
初始化 − 自执行函数可用于变量的初始化。
代码隐私 − 程序员可以避免代码的其他部分访问自执行函数的代码。

<< JavaScript - 函数提升 JavaScript - 箭头函数 >>