ECMAScript/ES6 IIFE（立即调用函数表达式）

精华

小牛编辑

168浏览

2023-03-14

这是一个JavaScript函数，它会在定义后立即运行。可以使用IIFE(立即调用函数表达式)来避免从块内部进行变量吊装。它允许公开访问方法，同时保留函数中定义的变量的私密性。

IIFE是一种设计模式，也称为自执行匿名函数。它包含两个主要部分：

第一部分是具有词法范围的匿名函数，该函数包含在分组运算符()中。
第二部分创建IIFE，JavaScript引擎将通过该IIFE直接解释该函数。

语法：

(function ()   
{  
    statements  
})();  

// 具有ES6箭头函数的IIFE语法(尽管仅允许在外部加上括号) 

(() => { /* ... */ })();

我们将通过以下示例来理解IIFE的概念。

(function()  
{  
    console.log("Hello World");   
})();

1.将函数转换为IIFE

我们可以通过以下步骤将常规函数转换为IIFE：

假设任何常规函数定义。
将该定义包装在一对括号内，这将创建函数表达式。

最后，必须添加一对括号和一个分号来标记语句的结尾。

示例代码

// Regular Function.   
function hello()   
{   
    console.log("Regular function");   
};   
// Regular Function execution.   
hello();   

// IIFE creation and execution.   
(function() { console.log("Immediately Invoked Function Expression"); })();

执行上面示例代码，得到以下结果：

Regular function
Immediately Invoked Function Expression

2.IIFE的要点

立即调用的函数表达式(IIFE)具有其范围。在函数表达式中声明的变量在函数外部将不可用。
像其他函数一样，IIFE也可以是匿名的或命名的。
IIFE也可以参数化。

示例

(function (x, y, z) {  
   console.log(x);  
   console.log(y);  
   console.log(z);  
 })(100, 200, 300);

执行上面示例代码，得到以下结果：

100
200
300