（笔记+个人理解）立即执行函数表达式IIFE

最新推荐文章于 2025-05-26 10:15:36 发布

菜鸭子

最新推荐文章于 2025-05-26 10:15:36 发布

阅读量374

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 前端文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/Febby_/article/details/89425282

前端同时被 2 个专栏收录

48 篇文章

订阅专栏

40 篇文章

订阅专栏

本文介绍了JavaScript中的IIFE（立即执行函数表达式），包括其作用、常见用法和进阶技巧。IIFE通过匿名函数表达式避免污染全局变量，常用于模块封装。文中详细阐述了IIFE的两种形式以及如何传递参数，同时探讨了其在代码组织中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

IIFE（Immediately Invoked Function Expression）代表立即执行函数表达式。
下面看一段代码

var a=2;
(function foo(){
    var a=3;
    console.log(a);  //3
})();
console.log(2); //2

由于函数被包含在一对()括号内部，成为了一个表达式，通过在末尾加上另外一个()可以立即执行这个函数。格式：(function foo(){…})().第一个()将函数变成一个表达式，第二个()执行这个函数。
这种模式就是IIFE立即执行函数表达式。
IIFE最常见的用法就是使用一个匿名函数表达式。如：

var a=4;
(function IIFE(){
    var a=5;
    console.log(a);//5
})();
console.log(a);//4

传统的IIFE是第一种形式(function foo(){…})(),很多人更喜欢第二种形式：(funtion(){…}())。第一种函数表达式被包含在()中，然后在后面用一个()来调用。第二种形式中用来调用的()被一斤了用来包装的()中。
IIFE的另一种普遍的进阶用法是把它们当做函数调用并传递参数进去。
如：

 var a=6;
(function IIFE(global){
     var a=7;
     console.log(a);//7
     console.log(global.a);//6
 })(window);
 console.log(a);//6

在这里我们将window对象的引用传递进去，将参数命名为global,因此在代码风格上对全局对象的引用变得比引用一个没有“全局”字样的变量更加清晰。

IIFE还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在IIFE执行后当做参数传递进去。

var a=8;
(function IIFE(def){
    def(window);
})(function def(global){
    var a=9;
    console.log(a); //9
    console.log(global.a);//8
})

函数表达式def定义在片段的第二部分，然后当做参数（这个参数也叫作def）被传递进IIFE函数定义的第一部分中。最后，参数def(也就是传递进去的函数）被调用，并将window传入当做global参数的值。

通过学习，IIFE 的作用可以简单概括为：第一，隐藏实现；第二，不污染外部（全局）变名空间；第三，用来编码js模块。

以上为个人对《你不知道的JavaScript》中对IIFE讲解的笔记以及个人理解。

知识来源：《你不知道的JavaScript》