本文深入解析JavaScript立即执行函数（IIFE）的概念、语法结构及核心特性。通过对比普通函数与箭头函数，详细阐述IIFE的定义方式、作用域隔离机制以及命名限制。重点讲解IIFE在参数传递中的应用，特别是利用形参解决早期IE浏览器undefined被篡改的问题，并分析其对代码压缩优化的帮助。
前言
IIFE，通常被称为立即执行函数。读者可能会好奇："我知道常规函数表达式的写法，但IIFE具体指什么？"本文将针对这一疑问进行解答。
函数表达式
在深入探讨立即调用函数表达式之前，先回顾JavaScript中普通函数表达式的标准写法。
function(){
return ;
}这是JavaScript中编写函数的常规方式：使用function关键字，后接函数名称，最后是函数体。
在ES6标准之后，还可以使用箭头函数，并将箭头函数赋值给变量。
ArrowFn(()=>{
})let ArrowFn=()=>{
}上述示例简要回顾了普通函数及箭头函数的编写方法。接下来介绍立即执行函数。
关键步骤在于如何调用上述方法。你需要在任意位置显式地调用它，这正是编写普通函数表达式的主要目的。
ArrowFn()立即执行函数
既然了解了普通函数表达式在JavaScript中的工作原理，现在转向IIFE。理解短语Immediately Invoked Functional Expressions的含义：
立即调用：指被即时执行的代码块。
函数表达式：前文已做过介绍。
综合理解如下：
IIFE（立即调用函数表达式）是一个JavaScript函数，它在定义完成后立即运行。——MDN
因此，无需显式调用该函数即可执行，它在JavaScript文件加载后立即运行。IIFE的语法结构如下：
(function(){
这里是函数体
})()观察语法结构，包含两对圆括号。第一对括号包裹执行逻辑，第二对括号通常用于传入调用参数，其作用是指示编译器立即执行该函数表达式。
以下是将普通函数转换为IIFE的方法示例：
function consoleName(){
console.log('hello 哈哈哈')
}
consoleName()
(function(){console.log('hello 哈哈哈')})()注意，IIFE无需显式调用。它们通常是匿名函数，因为不需要函数名，但也可以为其命名。此外，IIFE也可以是箭头函数。
IIFE同样接受参数，以下是一个简单示例：
function consoleName(name){
console.log('hello '+ name)
}
consoleName('哈哈哈')
(function(name){console.log('hello '+name)})("哈哈哈")IIFE的特征与行为
IIFE遵循JavaScript中其他函数/变量的作用域规则。"立即调用"这一名称有时会让新手困惑，误以为IIFE的执行与函数作用域无关，这是错误的。例如，若IIFE定义在另一个函数内部，则只有在调用父函数时才会执行。
function fn(){ console.log("A"); (()=>{ console.log("B") })() console.log("C") }输出结果为A B C。
与普通函数类似，IIFE可以是命名或匿名函数。即使IIFE拥有名称，也无法在外部引用或调用它。
IIFE拥有独立的作用域，即在函数表达式内部声明的变量在外部不可访问。
附：IIFE的参数传递
前文提及IIFE的参数传递，直接通过代码展示：
var mymodule= {};
(function(window, MyModule, undefined){
//代码
})(window, mymodule);
参数分为形参和实参。在function(window, MyModule, undefined)中，三个参数为形参；在第二个括号(window, mymodule)中，两个参数为实参。这可以理解为window对应window，MyModule对应mymodule。
普通形参
普通形参由window和wall等实际变量传入指定，可以是任意类型的变量。一个形参对应一个实参。
特殊形参undefined
众所周知，IE浏览器（尤其是早期版本）行为特殊。例如IE6具有修改undefined的能力，如果undefined被篡改，以下代码将无法正常工作：
if(mymodule == undefined){
//永远也进不来了
}
因此，增加一个形参可以避免此问题，在IIFE作用域内即可正常获取undefined的值。
同时，这种做法有助于代码压缩，减小文件大小。
总结
本文介绍了JavaScript立即执行函数的相关内容，更多JS立即执行函数知识请搜索本站历史文章或继续浏览后续文章，感谢支持！