IIFE 疑惑解析

IIFE 是什么呢？

IIFE 是 Immediately-Invoked Function Expression 的英文缩写，也就是立即执行函数表达式。

下面是一个 IIFE 代码实例：

(function(){
        console.log( "Hello!" );
    })();
    
> Hello!    

遇到的问题

// 定义了一个名为 IIFE 的函数
function IIFE(){
        console.log( "Hello!" );
    }   
    
IIFE();

> Hello!    

// 定义了一个名为 IIFE 的立即执行函数表达式
(function IIFE(){
        console.log( "Hello!" );
    })();  
    
IIFE();

> Hello!
> Uncaught ReferenceError: IIFE is not defined

我们定义了一个名为 IIFE 的函数，然后执行，发现成功输出 Hello！ 。
但是我们定义了一个名为 IIFE 的立即执行函数表达式，然后使用 IIFE() 去执行它的时候却发现报错 IIFE is not defined 。
这是为什么呢？

要解答这个疑惑，我们需要了解函数表达式和函数声明的区别。

函数表达式和函数声明

在 JavaScript 中有三种定义函数的方式。

// 方式一：使用 Function 构造函数来定义一个函数
var foo = new Function() 
// 方式二：使用 function 关键字来定义一个函数
function foo(){}
// 方式三：使用函数表达式来定义一个函数
var foo = function(){}

其中方式二和方式三非常相似。并且方式三种函数表达式也可以有自己名字，如下所示：

var foo = function foo(){}

那么函数表达式和函数声明有什么区别呢？

1. 当一条语句以 function 开头的时候，它就是函数声明。
2. 函数表达式可以添加()来执行，而函数声明不能。
3. 函数表达式分匿名函数表达式和具名函数表达式，但是函数表达式中的函数名称只是函数体中的一个本地变量（在方式三中可以通过 foo.name 来访问到该本地变量）。
4. 函数表达式可以被用作一个 IIFE，它一旦定义就运行。

问题解答

// 定义了一个名为 IIFE 的立即执行函数表达式
(function IIFE(){
        console.log( "Hello!" );
    })();  
    
IIFE();

> Hello!
> Uncaught ReferenceError: IIFE is not defined

我们来看这一段代码，这里面包含着一个名为 IIFE 的具名函数表达式。这个函数名称只是函数体中的一个本地变量，所以我们在外部通过函数名访问不到该函数。

附

另外我们可以来看看 IIFE 的两种定义方式，如下所示：

// 方式一：
(function(){
        console.log( "Hello!" );
    })();
// 方式二：    
(function (){
        console.log( "Hello!" );
    }()); 

由于 function 开头的语句会被识别为函数声明，函数声明不能被执行，所以在这里添加括号来标识这里是一个函数表达式，括号的结束位置可以在函数表达式定义结束，也可以在函数表达式执行结束。与下面的代码的效果是相同的。

var fn = function (){
        console.log( "Hello!" );
    };
( fn )();
( fn() );

> Hello!
> Hello!