JavaScript立即执行函数(IIFE)详解：语法、特性与参数传递技巧

前言

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立即执行函数知识请搜索本站历史文章或继续浏览后续文章，感谢支持！