JavaScript 立即执行函数表达式 (IIFE) 详解与写法
本文深入解析 JavaScript 中立即执行函数表达式 (IIFE) 的实现原理。通过对比错误写法，阐明解析器将 function 关键字识别为声明而非表达式的机制，并介绍通过括号包裹函数定义或调用部分来强制转换为表达式的两种标准写法，同时指出主流库常用的代码风格。
函数定义与使用的基本规则
在编程中，函数必须先定义后使用，这是几乎所有编程语言遵循的基本规则。
通常情况下，调用 JavaScript 函数需要遵循先定义、后调用的流程。以下是一个基础示例。
代码实现如下：
<!--by oscar999 2013-1-16-->
<!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>立即执行函数的尝试与错误分析
如果希望函数在定义的同时立即执行，而不需要显式调用，该如何编写代码？
2.思考的历程
基于上述常规用法，读者可能会产生如下联想：
既然调用函数是在函数名后添加一对圆括号，那么是否在 function 定义后的花括号外添加一对圆括号即可实现执行？例如以下写法：
代码实现如下：
function sayHello()
{
alert("hello");
}(); 遗憾的是，上述写法会引发 JavaScript 语法错误。
这是因为 JavaScript 解析器在遇到全局或函数内部的 function 关键字时，默认将其解析为函数声明，而非函数表达式。
具体而言，解析器会将末尾的花括号视为一个缺少名称的函数声明，由于函数声明必须包含名称，因此抛出语法错误。
另一种可能的尝试是：如果在花括号内传入参数，是否会被解析为表达式？
代码实现如下：
function sayHello()
{
alert("hello");
}(1);虽然语法错误消失，但上述写法的效果等同于以下代码：
代码实现如下：
function sayHello()
{
alert("hello");
};
(1);这两部分代码相互独立，函数实际上并未执行。
3.正确的写法
正确的 IIFE 写法与库实践
在 JavaScript 中，圆括号内不能直接包含语句。因此，当解析器遇到 function 关键字时，若代码被圆括号包裹，会将其解析为函数表达式而非声明。只需将包含函数定义及后续调用圆括号的代码整体用一对大括号括起来即可。
代码实现如下：
(function sayHello()
{
alert("hello");
}()); 另一种可行的写法是将调用圆括号移至外部，如下所示：
代码实现如下：
(function sayHello()
{
alert("hello");
})(); 推荐采用第一种方式。
然而，目前许多优秀的 JavaScript 库均采用第二种方式。
例如 Web 图形绘制库 git、draw2d 等均使用此风格。
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38