JavaScript 立即执行函数（IIFE）的三种常见写法

IIFE 的核心概念与目的

立即执行函数表达式（Immediately Invoked Function Expression，简称 IIFE）是一段在定义后立即执行的 JavaScript 函数。它的核心目的是创建一个封闭的作用域，从而避免变量污染全局命名空间，或保护内部变量的私有性。在 ES6 let 和 const 广泛普及之前，IIFE 是实现模块化和数据封装的主要手段；即便在现代开发中，理解 IIFE 对于阅读经典开源代码和掌握闭包机制依然至关重要。

第一种写法：括号包裹法

这是最经典且兼容性最好的 IIFE 写法。通过在函数声明外层添加一对圆括号，将“函数声明”强制转化为“函数表达式”，从而允许末尾直接调用。

第1步：使用圆括号定义结构

操作入口：编辑器任意位置
具体动作：使用左括号 ( 开始包裹匿名函数，右括号 ) 结束包裹，并在后紧跟一对空括号 () 进行调用。

(function () {
 // inside IIFE
 console.log("Hello from Brackets");
}());

参数说明：
(function () { ... }())：将函数表达式括起来，然后调用。
(function () { ... })()：先结束括号，再在外面加调用括号。两者效果一致，后者在阅读上稍显清晰。

完成状态：控制台输出 "Hello from Brackets"，且外部无法访问函数内的局部变量。

第二种写法：一元运算符法

利用 JavaScript 的一元运算符（如 !、+、-、~）具有“前置”特性，可以将紧随其后的语句解释为表达式而非声明。这是许多开发者偏爱的简洁写法。

第2步：使用感叹号或其他运算符

操作入口：编辑器任意位置
具体动作：在 function 关键字前添加一个一元运算符，例如 !。

!function () {
 // inside IIFE
 console.log("Hello from Unary");
}();

重要参数与风险：
虽然 ! 是最常见的，但 +、-、~ 同样有效。需要注意的是，如果函数有返回值，这个运算符会对返回值进行逻辑非或数学运算。例如上面的例子返回值为 false（因为 console.log 返回 undefined，!undefined 为真，但通常不关注返回值）。若需保留返回值语义，建议使用 +function(){...}() 配合后续处理，或直接用括号法。

完成状态：代码无报错执行，产生预期副作用。

第三种写法：void 关键字法

void 运算符在 JavaScript 中专门用于求值一个表达式但不返回任何值（即返回 undefined）。这使得它成为定义 IIFE 时保持返回值完整性（即忽略结果，仅执行副作用）的理想选择。

第3步：使用 void 关键字

操作入口：编辑器任意位置
具体动作：在 function 前加上 void 关键字。

void function () {
 // inside IIFE
 console.log("Hello from Void");
}();

适用场景：
当你需要确保这行代码不会意外返回一个对象或值，且你只关心函数的执行过程时，这种写法意图非常明确。它在某些混淆工具生成的代码中也较为常见。

完成状态：函数体执行完毕，整体表达式结果为 undefined。

总结与最佳实践建议

以上三种写法在功能上完全等价，浏览器引擎对它们的解析效率没有显著差异。选择哪种写法主要取决于团队规范和个人偏好：

• 括号法 ((function(){}()))：语义最直观，明确表示这是一个表达式并被调用，推荐用于大多数公开场合和教学。
• 一元运算符法 (!function(){}())：代码更短，节省字符，适合 minified 代码或对代码长度敏感的场景。
• void 法 (void function(){}())：明确表达“只求值，不要结果”的意图，适合特定的代码优化需求。

以上就是 JavaScript 立即执行函数的三种不同写法的详细内容，更多关于 JavaScript 作用域与闭包的资料请关注本站其它相关文章！