立即函式(IIFE)
- 詳細內容
- 分類：Javascript
- 發佈：2013-06-08, 週六 00:49
- 點擊數：3306
Javascript的立即函式(Immediately Invoked Function Expression)：
立即函是是Javascript中一種可以立即執行的函式，其本質其實是個函式表示式。下面程式碼代表著一個簡單的立即函式。
(function(){
// my special code
}());
其中的括號()代表的就是立刻執行該函式。在語法上，括號()也可以被放到左括號)外面，像是這樣。
(function(){
// my special code
})();
立即函式可以用來減少全域變數的使用(因為區域變數被包在函式作用域中)，很常被使用來進行只會被執行一次的程式碼，譬如說程式的初始化動作。
立即函示可以用來將功能獨立的程式碼給包起來，易讀好懂。在Javascript的函式庫中經常使用此模式。譬如Jquery：
(function( window, undefined ) {
....
})( window );
立即函式的參數傳遞：
立即函式也可以傳遞參數，他可以接受輸入參數，也可以有傳回值。上面一段JQuery的程式碼就是將全域變數window傳遞到立即函式中使用。
一般建議盡量少用輸入參數，因為立即函式的輸入參數在函式的最底下，若是函式太長，在閱讀時會需要拉到最下面程式碼才知道輸入的參數到底是什麼，這會造成閱讀的困難。但很幸運的是，這不是無解。 Greg Franko在他的 I Love My IIFE 中有提到一種做法，他將整個立即函式當成另一個立即函式的輸入然後在函式中呼叫：
(個人認為，嚴格來說第二個函式並不算是立即函式，他只是個函式表示式，被當成第一個立即函式的參數傳遞到立即函式中，並在函式中呼叫)
(function (library) {
//library 就是下面的函式 ==>(function (window, document, $) {}));
// Calls the second IIFE and locally passes in the global jQuery, window, and document objects
library(window, document, window.jQuery);
}
// Locally scoped parameters
(function (window, document, $) {
// Library code goes here
}));
何時該使用立即函式？
如果你有一段程式碼，只被執行一次，或許就該考慮使用立即函式將程式碼包裹起來，這樣做有幾個好處。
1.全域變數的減少：
寫程式難免會用到一些變數，但要避免變數暴露在全域之中，唯一的方式就是把它包裹在函式之中，或許你以前也有減少全域變數的觀念，所以你把程式碼寫在一個函式中，然後再呼叫它。現在你其實可以不需要這樣做，因為有立即函式的存在，所以你可以把程式碼包裹在立即函式中，然後放在它該出現的位置，在也不用看到一個init()(譬如說啦..)的呼叫，然後要拉到程式碼最下方去看這init()在做啥了。
2.全域變數區域化：
看到JQuery的範例了嗎，他把全域變數window當成參數傳遞給立即函式中，因此在函式中，window就變成了區域變數。這樣做是因為Javascript在看到變數時會先查找區域變數，然後再查找全域變數，因此全域變數變成區域變數在效率上有些微的提升。另外也可以最小化變數名稱，一般Javascript最小化的程式並不會對全域變數進行壓縮(因為不安全)，但區域變數就可以。因此全域變數區域化可以減少檔案的大小。當然你也可以自己來最小化。
(function( w, u) {
....
})( window );
如果你想更了解其他函式觀念，可以參考看看下面這篇文章：函式 Function。
我把許多函式的觀念與用法都收集在這篇文章內。
如果想更了解立即函式，也可以參考以下Ben Alman的 Immediately-Invoked Function Expression (IIFE)。
按個讚!~支持本站!~