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!