摘要:前言大家學的時候,經常遇到自執行匿名函數的代碼,今天我們主要就來想想說一下自執行。其實,前面兩個例子里的變量,也可以換成,因為和外面的不在一個作用于,所以不會出現問題,這也是匿名函數閉包的威力。
前言
大家學JavaScript的時候,經常遇到自執行匿名函數的代碼,今天我們主要就來想想說一下自執行。
在詳細了解這個之前,我們來談了解一下“自執行”這個叫法,本文對這個功能的叫法也不一定完全對,主要是看個人如何理解,因為有的人說立即調用,有的人說自動執行,所以你完全可以按照你自己的理解來取一個名字,不過我聽很多人都叫它為“自執行”,但作者后面說了很多,來說服大家稱呼為“立即調用的函數表達式”。
本文英文原文地址:http://benalman.com/news/2010/11/immediately-invoked-function-expression/
什么是自執行?在JavaScript里,任何function在執行的時候都會創建一個執行上下文,因為為function聲明的變量和function有可能只在該function內部,這個上下文,在調用function的時候,提供了一種簡單的方式來創建自由變量或私有子function。
// 由于該function里返回了另外一個function,其中這個function可以訪問自由變量i // 所有說,這個內部的function實際上是有權限可以調用內部的對象。 function makeCounter() { // 只能在makeCounter內部訪問i var i = 0; return function () { console.log(++i); }; } // 注意,counter和counter2是不同的實例,分別有自己范圍內的i。 var counter = makeCounter(); counter(); // logs: 1 counter(); // logs: 2 var counter2 = makeCounter(); counter2(); // logs: 1 counter2(); // logs: 2 alert(i); // 引用錯誤:i沒有defind(因為i是存在于makeCounter內部)。
很多情況下,我們不需要makeCounter多個實例,甚至某些case下,我們也不需要顯示的返回值,OK,往下看。
問題的核心當你聲明類似function foo(){}或var foo = function(){}函數的時候,通過在后面加個括弧就可以實現自執行,例如foo(),看代碼:
// 因為想下面第一個聲明的function可以在后面加一個括弧()就可以自己執行了,比如foo(), // 因為foo僅僅是function() { /* code */ }這個表達式的一個引用 var foo = function(){ /* code */ } // ...是不是意味著后面加個括弧都可以自動執行? function(){ /* code */ }(); // SyntaxError: Unexpected token ( //
上述代碼,如果運行,第2個代碼會出錯,因為在解析器解析全局的function或者function內部function關鍵字的時候,默認是認為function聲明,而不是function表達式,如果你不顯示告訴編譯器,它默認會聲明成一個缺少名字的function,并且拋出一個語法錯誤信息,因為function聲明需要一個名字。
函數,括弧,語法錯誤(SyntaxError)有趣的是,即便你為上面那個錯誤的代碼加上一個名字,他也會提示語法錯誤,只不過和上面的原因不一樣。在一個表達式后面加上括號(),該表達式會立即執行,但是在一個語句后面加上括號(),是完全不一樣的意思,他的只是分組操作符。
// 下面這個function在語法上是沒問題的,但是依然只是一個語句 // 加上括號()以后依然會報錯,因為分組操作符需要包含表達式 function foo(){ /* code */ }(); // SyntaxError: Unexpected token ) // 但是如果你在括弧()里傳入一個表達式,將不會有異常拋出 // 但是foo函數依然不會執行 function foo(){ /* code */ }(1); // 因為它完全等價于下面這個代碼,一個function聲明后面,又聲明了一個毫無關系的表達式: function foo(){ /* code */ }(1);
你可以訪問ECMA-262-3 in detail. Chapter 5. Functions 獲取進一步的信息。
自執行函數表達式要解決上述問題,非常簡單,我們只需要用大括弧將代碼的代碼全部括住就行了,因為JavaScript里括弧()里面不能包含語句,所以在這一點上,解析器在解析function關鍵字的時候,會將相應的代碼解析成function表達式,而不是function聲明。不明白的,可以看深入理解JavaScript系列2:揭秘命名函數表達式中的函數表達式和函數聲明
// 下面2個括弧()都會立即執行 (function () { /* code */ } ()); // 推薦使用這個 (function () { /* code */ })(); // 但是這個也是可以用的 // 由于括弧()和JS的&&,異或,逗號等操作符是在函數表達式和函數聲明上消除歧義的 // 所以一旦解析器知道其中一個已經是表達式了,其它的也都默認為表達式了 // 不過,請注意下一章節的內容解釋 var i = function () { return 10; } (); true && function () { /* code */ } (); 0, function () { /* code */ } (); // 如果你不在意返回值,或者不怕難以閱讀 // 你甚至可以在function前面加一元操作符號 !function () { /* code */ } (); ~function () { /* code */ } (); -function () { /* code */ } (); +function () { /* code */ } (); // 還有一個情況,使用new關鍵字,也可以用,但我不確定它的效率 // http://twitter.com/kuvos/status/18209252090847232 new function () { /* code */ } new function () { /* code */ } () // 如果需要傳遞參數,只需要加上括弧()
上面所說的括弧是消除歧義的,其實壓根就沒必要,因為括弧本來內部本來期望的就是函數表達式,但是我們依然用它,主要是為了方便開發人員閱讀,當你讓這些已經自動執行的表達式賦值給一個變量的時候,我們看到開頭有括弧(,很快就能明白,而不需要將代碼拉到最后看看到底有沒有加括弧。
用閉包保存狀態和普通function執行的時候傳參數一樣,自執行的函數表達式也可以這么傳參,因為閉包直接可以引用傳入的這些參數,利用這些被lock住的傳入參數,自執行函數表達式可以有效地保存狀態。
下面是錯誤的使用:
var elems = document.getElementsByTagName("a"); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("click", function (e) { e.preventDefault(); alert("I am link #" + i); }, "false"); }
由于變量i從來就沒背locked住。相反,當循環執行以后,我們在點擊的時候i獲得數值,所以說無論點擊哪個連接,最終顯示的都是I am link #10(如果有10個a元素的話)
下面是正確的使用:
var elems = document.getElementsByTagName("a"); for (var i = 0; i < elems.length; i++) { (function (lockedInIndex) { elems[i].addEventListener("click", function (e) { e.preventDefault(); alert("I am link #" + lockedInIndex); }, "false"); })(i); }
由于在自執行函數表達式閉包內部i的值作為locked的索引存在,在循環執行結束以后,盡管最后i的值變成了a元素總數(例如10)但閉包內部的lockedInIndex值是沒有改變,因為他已經執行完畢了所以當點擊連接的時候,結果是正確的。
或者你也可以像這樣使用:
var elems = document.getElementsByTagName("a"); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("click", (function (lockedInIndex) { return function (e) { e.preventDefault(); alert("I am link #" + lockedInIndex); }; })(i), "false"); }
上面的代碼在處理函數那里使用自執行函數表達式,而不是在addEventListener外部,這樣也可以達到locked的效果,但是前面的代碼更具有可讀性。
其實,前面兩個例子里的lockedInIndex變量,也可以換成i,因為和外面的i不在一個作用于,所以不會出現問題,這也是匿名函數+閉包的威力。
自執行匿名函數和立即執行的函數表達式區別在這篇文章中,我們一直叫自執行函數,確切的說是自執行匿名函數(Self-executing anonymous function),但英文原文作者一直倡議使用立即調用的函數表達式(Immediately-Invoked Function Expression)這一名稱,作者又舉了一堆例子來解釋,好吧,我們來看看:
// 這是一個自執行的函數,函數內部執行自身,遞歸 function foo() { foo(); } // 這是一個自執行的匿名函數,因為沒有函數名稱 // 必須使用arguments.callee屬性來執行自己 var foo = function () { arguments.callee(); }; // 這可能也是一個自執行的匿名函數,僅僅是foo函數名引用它自身 // 如果你將foo改變成其它的,你將得到一個自執行(used-to-self-execute)的匿名函數 var foo = function () { foo(); }; // 有些人叫這個是自執行的匿名函數(即便它不是),因為它沒有調用自身,它只是立即執行而已。 (function () { /* code */ } ()); // 為函數表達式添加一個函數名稱,可以方便Debug // 注意:一旦命名為函數添加了函數名,這個函數就不再是匿名的了 (function foo() { /* code */ } ()); // 立即調用的函數表達式(IIFE)也可以自執行,不過可能不常用罷了 (function () { arguments.callee();} ()); (function foo() { foo(); } ());
希望這里的一些例子,可以讓大家明白,什么叫自執行,什么叫立即調用。
Module模式注:arguments.callee在ECMAScript 5 strict mode里被廢棄了,所以在這個模式下,其實是不能用的。
在講到這個立即調用的函數表達式的時候,我又想起來了Module模式,如果你還不熟悉這個模式,我們先來看看代碼:
// 創建一個立即調用的匿名函數表達式 // return一個變量,其中這個變量里包含你要暴露的東西 // 返回的這個變量將賦值給counter,而不是外面聲明的function自身 var counter = (function () { var i = 0; return { get: function () { return i; }, set: function (val) { i = val; }, increment: function () { return ++i; } }; } ()); // counter是一個帶有多個屬性的對象,上面的代碼對于屬性的體現其實是方法 counter.get(); // 0 counter.set(3); counter.increment(); // 4 counter.increment(); // 5 counter.i; // undefined 因為i不是返回對象的屬性 i; // 引用錯誤: i 沒有定義(因為i只存在于閉包)
關于更多Module模式的介紹,請訪問我的上一篇文章:深入理解JavaScript系列2:揭秘命名函數表達式
更多閱讀希望上面的一些例子,能讓你對立即調用的函數表達(也就是我們所說的自執行函數)有所了解,如果你想了解更多關于function和Module模式的信息,請繼續訪問下面列出的網站:
ECMA-262-3 in detail. Chapter 5. Functions. - Dmitry A. Soshnikov
Functions and function scope - Mozilla Developer Network
Named function expressions - Juriy “kangax” Zaytsev
深入理解JavaScript系列3:全面解析Module模式 - hiyangguo
Closures explained with JavaScript - Nick Morgan
關于本文本文轉自TOM大叔的深入理解JavaScript系列
【深入理解JavaScript系列】文章,包括了原創,翻譯,轉載,整理等各類型文章,原文是TOM大叔的一個非常不錯的專題,現將其重新整理發布。謝謝大叔。如果你覺得本文不錯,請幫忙點個推薦,支持一把,感激不盡。
更多優秀文章歡迎關注我的專欄
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78428.html
摘要:將匿名函數賦予一個變量,叫函數表達式,這是最常見的函數表達式語法形式。組成這是一個被稱為自執行匿名函數的設計模式,主要包含兩部分。 一、函數聲明&函數表達式 1.1 函數聲明 (函數語句) showImg(https://segmentfault.com/img/bVbbqvT?w=278&h=166); (1)使用 function 關鍵字聲明一個函數,再指定一個函數名,叫函數聲明。...
摘要:,對外公開的接口。更需要注意立即執行函數,返回的是一個匿名函數,也是一個閉包,在這里一定要注意一個問題是在進入可執行上下文時創建的。三在方法中,注意如下代碼省略代碼的實際參數是一個自執行匿名函數,這個匿名函數接受了兩個參數,但只返回了。 function DemoFunction(){ this.init = function(){ var func = (fu...
摘要:圖片轉引自的演講和兩個定時器中回調的執行邏輯便是典型的機制。異步編程關于異步編程我的理解是,在執行環境所提供的異步機制之上,在應用編碼層面上實現整體流程控制的異步風格。 問題背景 在一次開發任務中,需要實現如下一個餅狀圖動畫,基于canvas進行繪圖,但由于對于JS運行環境中異步機制的不了解,所以遇到了一個棘手的問題,始終無法解決,之后在與同事交流之后才恍然大悟。問題的根節在于經典的J...
摘要:函數名可以省略省略函數名的話該函數就成為了匿名函數被傳入函數的參數的名稱一個函數最多可以有個參數這些語句組成了函數的函數體。使用那我們通常為什么使用函數立即表達式呢,以及我如何使用呢通常情況下,只對匿名函數使用這種立即執行的函數表達式。 注:此文只在理解立即執行函數,不在所謂原創,文中大量引用阮一峰的JavaScript標準參考教程、MDN的JavaScript 參考文檔和深入理解Ja...
摘要:要理解立即執行函數,需要先理解一些函數的基本概念。函數表達式使用關鍵字聲明一個函數,但未給函數命名,最后將匿名函數賦予一個變量,叫函數表達式,這是最常見的函數表達式語法形式。 javascript和其他編程語言相比比較隨意,所以javascript代碼中充滿各種奇葩的寫法,有時霧里看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( functio...
閱讀 1711·2021-11-11 10:58
閱讀 4184·2021-09-09 09:33
閱讀 1257·2021-08-18 10:23
閱讀 1548·2019-08-30 15:52
閱讀 1624·2019-08-30 11:06
閱讀 1867·2019-08-29 14:03
閱讀 1507·2019-08-26 14:06
閱讀 2943·2019-08-26 10:39