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!