JavaScript 立即调用函数表达式 (IIFE) 的两种正确写法与原理

当希望函数在定义的同时立即执行，而不需要后续显式调用时，应如何编写代码？本文将详细介绍实现步骤及原理。

前言

前言

在绝大多数编程语言中，函数必须先定义后使用是一条基本规则。

通常情况下，调用 JavaScript 函数需要遵循先定义、后调用的顺序。以下是一个标准示例。

代码如下：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Say Hello</title>
</head>
<body>
<script>
//define function
function sayHello()
{ 
alert("hello");
} 
//call function
sayHello();
</script>
</body>
</html>

如果希望函数在定义时立即执行，无需显式调用，该如何实现？

思考的历程

思考的历程

基于上述常规用法，读者可能会产生以下联想：

既然调用函数是在函数名后加括号，那么在 function 定义的大括号后直接加一对大括号，是否就能执行呢？尝试如下写法：

代码如下：

 
function sayHello()
{ 
alert("hello");
}(); 

这种写法会引发 JavaScript 语法错误。

原因是 JavaScript 解析器在遇到全局或函数内部的 function 关键字时，默认将其解析为函数声明（Function Declaration），而非函数表达式（Function Expression）。

解析器会将末尾的大括号视为一个缺少名称的函数声明，由于函数声明必须包含名称，因此抛出语法错误。

另一种尝试是：如果在末尾大括号内传入参数，是否能强制解析为表达式？

代码如下：

 
function sayHello()
{ 
alert("hello");
}(1);

虽然语法错误消失，但这种写法在逻辑上等同于以下代码：

代码如下：

 
function sayHello()
{ 
alert("hello");
}; 
(1);

这两部分相互独立，函数实际上并未执行。

正确的写法

正确的写法

在 JavaScript 中，括号内不能直接包含语句。因此，解析器在解析 function 关键字时，若发现其被括号包裹，会将其识别为函数表达式。只需将包含函数定义及后续调用括号的大括号整体用圆括号包裹即可。

代码如下：

 
(function sayHello()
{ 
alert("hello");
}()); 

另一种可行的写法是将末尾的大括号移出，如下所示：

代码如下：

 
(function sayHello()
{ 
alert("hello");
})(); 

推荐使用第一种方式。

然而，目前许多优秀的 JavaScript 库采用第二种方式。

例如 Web 图形绘制相关的库：git、draw2d 等。