jstips 第 25 期解读：深入理解 JavaScript 立即执行函数表达式（IIFE）

教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载立即执行函数表达式Immediately Invoked Function Expression简称 IIFE常被戏称为 Iffy是 JavaScript 中一个看似简单却用途深远的语法结构。本篇基于 jstips 仓库中的英文原帖 _posts/en/javascript/2016-01-25-Using-immediately-invoked-function-expression.md中文版见 _posts/zh_CN/javascript/2016-01-25-Using-immediately-invoked-function-expression.md繁体中文版见 _posts/zh_TW/javascript/2016-01-25-Using-immediately-invoked-function-expression.md系统讲解 IIFE 的语法原理、命名变体、典型应用场景与性能考量。读完本文你将掌握 IIFE 的完整写法理解它如何借助函数表达式与作用域机制实现变量隔离并能在模块封装、初始化逻辑、循环闭包等真实场景中熟练运用。什么是 IIFEIIFE 全称 Immediately Invoked Function Expression即立即执行函数表达式。从字面拆解Immediately Invoked定义之后立即被调用Function Expression它首先是一个函数表达式而非函数声明它通常是一个匿名函数因此经常被开发者昵称为 Iffy。原帖给出的最小示例是这样的(function() { // Do something } )()这段代码定义了一个匿名函数将其包裹在括号中并在定义的同时通过末尾的()立即调用执行。运行到这一行时函数体内的代码会马上执行一次且不会留下任何可被外部引用的函数名。括号的关键作用把函数声明变成函数表达式IIFE 中那对包裹函数的圆括号是整个语法的核心。原帖明确指出包裹匿名函数的这对括号将匿名函数转换成了一个函数表达式function expression或变量表达式variable expression。为什么必须要这对括号这需要回顾 JavaScript 的解析规则。当解释器看到以function关键字开头的语句时会将其视为函数声明——声明必须有一个名字而且不能直接跟()调用会产生语法错误。而一旦把函数体放进括号里(function(){ ... })function就不再位于语句开头解析器便会将整个括号内容当作表达式来求值此时它返回一个函数对象后面紧跟的()才能对其执行调用。这与仓库中另一篇关于变量提升Hoisting的 tip 密切相关。该 tip 指出函数声明会被整体提升hoisted到作用域顶部而函数表达式如var functionVar function(){ ... }只提升声明、不提升赋值因此在赋值之前调用它会得到TypeError: undefined is not a function。IIFE 利用的正是表达式先求值、后调用的机制括号内的函数作为一个整体先被求值成函数对象紧接着被调用既不需要名字也不会被提升逻辑干扰。所以一个 IIFE 在宏观上等价于创建了一个临时函数对象并立即执行它的完整形式可以写作(function() { // 函数体 })();末尾的分号不是必须的取决于上下文但建议保留以避免与前面语句产生解析歧义。其他合法的 IIFE 写法除了用圆括号包裹JavaScript 还允许用任何能把function从语句起始位置变成表达式的一部分的操作符来构造 IIFE。常见的替代写法包括// 一元操作符形式 !function() { console.log(立即执行); }(); ~function() { console.log(立即执行); }(); function() { console.log(立即执行); }(); -function() { console.log(立即执行); }(); // void 操作符形式 void function() { console.log(立即执行); }();这些写法效果相同但会改变函数的返回值例如!会得到布尔值取反、void恒得undefined实际项目中用得最多的仍是圆括号形式因为它语义最清晰、不改变返回值。仓库中同样涉及一元操作符与返回值语义的讨论可参考 2020-11-04-what-is-a-void-operator.md 和 2016-04-05-return-values-with-the-new-operator.md。命名 IIFEIIFE 也可以有名字虽然 IIFE 最常见的形式是匿名的但原帖特别强调我们同样可以创建命名的立即执行函数表达式。请看原帖的完整示例(someNamedFunction function(msg) { console.log(msg || Nothing for today !!) }) (); // Output -- Nothing for today !! someNamedFunction(Javascript rocks !!); // Output -- Javascript rocks !! someNamedFunction(); // Output -- Nothing for today !!这段代码有两点值得细说左侧赋值someNamedFunction function(msg){ ... }把函数表达式赋值给了全局变量someNamedFunction。因此虽然这个函数是立即执行的但它的引用被保留了下来之后可以像普通函数一样多次调用someNamedFunction(Javascript rocks !!)、someNamedFunction()。默认参数技巧函数体中的msg || Nothing for today !!是一个短路求值short-circuit evaluation的经典用法——当msg为空值时返回默认文案。关于短路求值的详细讨论可参考仓库中的 _posts/en/javascript/2016-01-27-short-circuit-evaluation-in-js.md。运行结果立即执行时msg为undefined输出Nothing for today !!传入Javascript rocks !!时原样输出再次无参调用时又输出默认文案。这种命名 IIFE模式常被用于模块初始化既要在加载时立刻执行初始化逻辑又要暴露若干可供外部调用的函数接口相当于手工实现一个极简模块系统。IIFE 的核心价值隔离作用域避免全局污染理解 IIFE 的价值需要先理解 JavaScript 的作用域规则。在 ES6 之前JavaScript 只有全局作用域和函数作用域var声明的变量没有块级作用域。仓库中的 Basics declarations 一篇给出了非常直观的对比实验var y, x y 1 // var x; var y; x y 1 console.log(-- 1:, x ${x}, y ${y}) //-- 1: x 1, y 1 ;(() { var x y 2 // var x; x y 2; console.log(2.0:, x ${x}, y ${y}) //2.0: x 2, y 2 })() console.log(-- 2.1:, x ${x}, y ${y}) //-- 2.1: x 1, y 2这个例子中的;(() { ... })()正是一个 IIFE使用了箭头函数形式。它揭示了一个极易踩坑的事实在 IIFE 内部写var x y 2时x因为带var而被限制在函数作用域内而y因为没有var前缀被隐式声明到了全局作用域。于是 IIFE 执行完毕后外部y的值从 1 被改成了 2而x保持 1 不变。这说明两点IIFE 内部默认拥有独立作用域在函数体内用var声明的变量不会泄漏到外部必须显式使用var或let/const否则会通过隐式全局变量污染全局命名空间。而关于隐式全局变量仓库中的 use strict and get lazy 一篇给出了更严厉的约束在严格模式下变量只能通过var以及let/const声明引入未声明的赋值会直接抛出错误而不是悄悄创建全局变量。将二者结合最稳健的模块封装写法是(function() { use strict; var privateCounter 0; // 外部无法访问 window.increment function() { // 只暴露需要公开的部分 return privateCounter; }; })();这样IIFE 负责创建私有作用域严格模式负责兜底阻止隐式全局变量二者配合实现了真正可靠的封装。IIFE 的典型应用场景结合原帖有一些特别重要的用途的表述IIFE 在实战中主要有以下几类用途1. 模块化封装与私有状态在 ES Modules 出现之前IIFE 是前端构建模块的事实标准如 jQuery 插件、UMD 包装。通过闭包IIFE 内部变量对外部完全隐藏只有显式返回或挂载的对象可见从而避免与全局环境相互干扰。关于闭包的更多细节可参考仓库中的 _posts/en/javascript/2017-06-14-closures-inside-loops.md。2. 循环中的闭包陷阱经典的面试题for 循环 setTimeout 输出 i的解法之一就是 IIFEfor (var i 0; i 3; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); }每次迭代通过 IIFE 创建一个新的函数作用域并把当前的i作为参数j传入从而为每个回调捕获独立的j值。这正是立即执行 参数传递的典型组合。3. 初始化逻辑的一次性执行只需运行一次、且不希望留下任何全局足迹的代码事件绑定、配置读取、polyfill 注入等非常适合放进 IIFE。原帖中的命名 IIFE示例本质上也是初始化场景——执行一次并保留句柄。4. 作为现代工具链的编译产物使用 Babel 等工具转译 ES6 模块代码时生成的 CommonJS/UMD 包装通常就是 IIFE 结构构建工具如 Webpack 的 runtime也会大量使用 IIFE 来隔离每个模块的作用域避免模块间的变量互相泄漏。这一点从 Basics declarations 中的;(() { ... })()写法可以直观感受到——现代代码中箭头函数形式的 IIFE 已非常普遍。IIFE 与现代语法的关系箭头函数与块级作用域原帖发布于 2016 年初彼时 ES6 刚刚普及。今天再看IIFE 的许多职责正在被新语法接管箭头函数(() { ... })()与(function() { ... })()语法等价只是箭头函数不绑定自己的this会从外层词法环境继承this。仓库中的 Fat Arrow Functions 一篇详细讲解了这一特性指出箭头函数从周围词法上下文捕获this因此在需要保留外部this的场景下箭头函数形式的 IIFE 更加顺手而需要独立this如构造逻辑时则应继续使用传统function形式。let/const块级作用域在for循环中使用let i声明每次迭代天然生成独立绑定已不再需要 IIFE 来救场模块系统ES Modules也让用 IIFE 造模块不再是刚需。但 IIFE 作为立即执行一段隔离代码的通用工具在各类初始化、工具函数、防御性编程中依然大量存在值得完全掌握。参数、返回值与性能考量给 IIFE 传参IIFE 末尾的()就是一次普通的函数调用可以传入任意参数(function(window, document, undefined) { // 在函数内部使用局部别名既缩短书写又提升一点访问速度 })(window, document);传入的实参在 IIFE 内部成为局部变量外部修改不会影响内部关于引用如何传递仓库中的 Know the passing mechanism 一篇有详细说明JavaScript 对对象传递的是引用值call-by-sharingIIFE 的参数传递同样遵循这一规则。接收 IIFE 的返回值IIFE 是一个表达式它的调用结果可以被赋值、参与运算var counterModule (function() { var count 0; return { inc: function() { return count; }, dec: function() { return --count; } }; })();这里 IIFE 返回一个包含两个方法的对象赋值给counterModule外部只能通过这两个方法读写count——私有变量 公开接口的模块模式就此完成。这种返回对象以支持链式调用的思想在仓库的 _posts/en/javascript/2016-01-20-return-objects-to-enable-chaining-of-functions.md 中也有呼应。性能与注意事项原帖在结尾提到了性能话题并附有 jsPerf 基准链接该外部页面现已不可访问此处仅作历史参考。结合实践关于 IIFE 的性能与工程注意事项可以总结为创建与调用的开销IIFE 每次执行都要创建新的函数对象和作用域因此在超高频循环体内滥用 IIFE 会产生不必要的开销。现代 V8 等引擎对此有大量优化实际影响通常很小但写法上仍建议循环体内部尽量复用已定义的函数而不是反复创建 IIFE。代码可读性IIFE 的首要价值是作用域隔离而非性能优化为了可读性建议始终写清括号与分号必要时给出注释说明这段立即执行的意图。与严格模式的位置关系use strict若放在 IIFE 内部则只对该 IIFE 生效不会影响外部代码——这是把严格模式局部化的常用手法可避免 use strict and get lazy 中提到的构建链拼接导致全文件意外进入严格模式的副作用。小结IIFE 是 JavaScript 中小而重要的语法设施一对括号把函数声明变为函数表达式末尾的()让它立即执行二者合在一起创造了独立的函数作用域。原帖的核心要点可浓缩为基本形式(function() { ... })()匿名且立即执行括号的作用是制造函数表达式从而绕开语句开头function视为声明的解析规则也支持命名形式(someNamedFunction function(msg){ ... })()执行后仍可通过变量名再次调用主要用途是作用域隔离、模块封装、初始化执行并常与严格模式、闭包、短路求值等特性协同工作。在现代 JavaScript 中IIFE 的部分场景被块级作用域、箭头函数和模块系统取代但理解其表达式 立即调用的本质依然是理解闭包、模块化和各类工具链编译产物的基础。仓库内还有多篇与之互补的 tip 值得继续阅读作用域相关的 Basics declarations、闭包相关的 closures-inside-loops、箭头函数相关的 Fat Arrow Functions以及严格模式相关的 use strict and get lazy。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐30 seconds of code 精讲JavaScript IIFE立即调用函数表达式原理与实战30 seconds of code 精讲JavaScript IIFE立即调用函数表达式原理与实战 导读 IIFEImmediately Invok教程文档JavaScript立即执行函数(IIFE)从入门到精通的终极指南JavaScript立即执行函数 IIFE 从入门到精通的终极指南 JavaScript立即执行函数IIFE是前端开发中至关重要的概念它能帮助开发者解决教程JavaScript教程深入理解函数表达式JavaScript教程深入理解函数表达式 函数表达式是JavaScript中一个强大且灵活的特性它允许我们在任何表达式上下文中创建函数。与函数声明不同函文档教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考