JavaScript 立即执行函数表达式 (IIFE) 详解与写法

作者:闭包旅人

时间:2026-10-26

浏览:83

本文深入解析 JavaScript 中立即执行函数表达式 (IIFE) 的实现原理。通过对比错误写法,阐明解析器将 function 关键字识别为声明而非表达式的机制,并介绍通过括号包裹函数定义或调用部分来强制转换为表达式的两种标准写法,同时指出主流库常用的代码风格。

文章目录
1.前言

函数定义与使用的基本规则

在编程中,函数必须先定义后使用,这是几乎所有编程语言遵循的基本规则。


通常情况下,调用 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 等均使用此风格。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章