JavaScript-立即調用函數表達式（IIFE）

XUI 發布于2019-08-26 11:55 / 2559人閱讀

摘要：將匿名函數賦予一個變量，叫函數表達式，這是最常見的函數表達式語法形式。組成這是一個被稱為自執行匿名函數的設計模式，主要包含兩部分。

一、函數聲明&函數表達式 1.1 函數聲明 (函數語句)

（1）使用 function 關鍵字聲明一個函數，再指定一個函數名，叫函數聲明。

（2）【注意】JavaScript引擎規定，如果function關鍵字出現在行首，一律解釋成函數聲明語句

1.2 函數表達式 (function expression)

（1）使用 function 關鍵字聲明一個函數，函數名稱可被省略，此種情況下的函數是 匿名函數（anonymous）。函數名稱只是函數體中的一個本地變量。

（2）將匿名函數賦予一個變量，叫函數表達式，這是最常見的函數表達式語法形式。

1.3 匿名函數

（1）下面是匿名函數的一個例子（函數沒有名字）。

（2）也可以在定義時為函數命名。

（3）命名函數表達式的好處是當我們遇到錯誤時，堆棧跟蹤會顯示函數名，容易尋找錯誤。

（4）可以看到，上面的兩個例子都不以function開頭。不以function開頭的函數語句就是函數表達式定義。

1.4 IIFE

（1）但有時需要在定義函數之后，立即調用該函數（函數只使用一次）。這種函數就叫做立即執行函數，全稱為立即調用函數表達式IIFE(Imdiately Invoked Function Expression)

二、立即調用函數表達式 2.1 概念

立即調用函數表達式（IIFE）是一個在定義時就會立即執行的  JavaScript 函數。

2.2 組成

（1）這是一個被稱為 自執行匿名函數的設計模式，主要包含兩部分。第一部分是包圍在 圓括號運算符() 里的一個匿名函數。

（2）第二部分再一次使用 () 創建了一個立即執行函數表達式，JavaScript 引擎到此將直接執行函數。

2.3 寫法

（1）【最常用的兩種辦法】

（2）【其他寫法】

2.4 括號

（1）無論何時，給立即執行函數 加上括號 是個好習慣。

（2）通過以上的介紹，我們大概了解通過()可以使得一個函數表達式立即執行。

（3）有的時候，我們實際上不需要使用()使之變成一個函數表達式，啥意思？比如下面這行代碼，其實不加上()也不會保錯。

（4）但是我們依然推薦加上()。

（5）為什么？因為我們在閱讀代碼的時候，如果 function 內部代碼量龐大，我們不得不滾動到最后去查看 function(){} 后 是否帶有()，用來確定 i 的值，并判斷是 function 還是 function內部的返回值。所以為了代碼的可讀性，請盡量加上()，無論是否已經是表達式。

2.4 作用

（1）IIFE 中的匿名函數擁有 獨立的詞法作用域。這不僅避免了外界訪問此 IIFE 中的變量，而且又不會污染全局作用域。（另一種說法【構造一個函數作用域，防止污染全局變量】）

（2）JavaScript 沒用私有作用域的概念，如果是在多人開發的項目，你在全局或局部作用域中聲明的變量，可能會被其他人不小心用同名的變量給覆蓋，根據JavaScript 函數作用域鏈的特性，使用這種技術可以模仿一個私有作用域，匿名函數作為一個“容器”，“容器”內部可以訪問外部的變量，而外部環境不能訪問“容器”內部的變量，所以 ( function(){…} )() 內部定義的變量不會和外部的變量發生沖突，俗稱“匿名包裹器”或“命名空間”。

（3）【注意】將 IIFE 分配給一個變量，不是存儲 IIFE 本身，而是存儲 IIFE 執行后返回的結果。

2.5 示例

接下來用一個需求實現來更直觀地說明IIFE的用途。假設有一個需求，每次調用函數，都返回加1的一個數字(數字初始值為0)

【1】全局變量

一般情況下，我們會使用全局變量來保存該數字狀態

【2】自定義屬性

但上面的方法中，變量a實際上只和add函數相關，卻聲明為全局變量，不太合適

將變量a更改為函數的自定義屬性更為恰當

【3】IIFE

其實這樣做，還是有問題。有些代碼可能會無意中將add.count重置

使用IIFE把計數器變量保存為私有變量更安全，同時也可以減少對全局空間的污染

參考文章

深入理解JavaScript系列（4）：立即調用的函數表達式湯姆大叔

（譯）詳解javascript立即執行函數表達式（IIFE）韓子遲

深入理解閉包系列第三篇——IIFE 小火柴的藍色理想

GPU云服務器云服務器 javascript調用函數 javascript調用php函數函數表達式 javascript表達式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107835.html

Javascript知識點：IIFE - 立即調用函數

摘要：所以那些匿名函數附近使用括號或一些一元運算符的慣用法，就是來引導解析器，指明運算符附近是一個表達式。 Immediately-invoked Function Expression（IIFE，立即調用函數），簡單的理解就是定義完成函數之后立即執行。因此有時候也會被稱為自執行的匿名函數（self-executing anonymous function）。 IIFE的叫法最早見于Ben...

goji 2019-08-19 14:51 評論0 收藏0
[譯] JavaScript：立即執行函數表達式（IIFE）

摘要：而且，如果你想跳過這里，你可以直接跳到立即調用函數表達式進行閱讀，但是我建議你讀完整篇文章。當圓括號包裹函數時，它會默認將函數作為表達式去解析，而不是函數聲明。什么是呢它使一個被立即調用的函數表達式。一旦命名，函數將不再匿名。原文：http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iif...

546669204 2019-08-21 10:46 評論0 收藏0
立即執行函數表達式(IIFE)

摘要：另外，如果你想跳過這里，你可以直接跳到立即調用函數表達式進行閱讀，但是我建議你讀完整篇文章。當圓括號包裹函數時，它會默認將函數作為表達式去解析，而不是函數聲明。原文：Immediately-Invoked Function Expression (IIFE) by Ben Alman原譯：立即執行函數 by Murphywuwu改增內容： by blanu 也許你沒有注意到，我是一個...

Yu_Huang 2019-08-20 12:28 評論0 收藏0
講清楚之 javascript 函數

摘要：中函數是一等公民。小明小明調用函數時，傳遞給函數的值被稱為函數的實參值傳遞，對應位置的函數參數名叫作形參。所以不推薦使用構造函數創建函數因為它需要的函數體作為字符串可能會阻止一些引擎優化也會引起瀏覽器資源回收等問題。函數之前幾節中圍繞著函數梳理了 this、原型鏈、作用域鏈、閉包等內容，這一節梳理一下函數本身的一些特點。 javascript 中函數是一等公民。并且函數也是對象，...

Keagan 2019-08-26 11:59 評論0 收藏0