用函數(shù)(IIFE)五種寫法詳解與應(yīng)用場(chǎng)景)
1. 項(xiàng)目概述為什么我們需要自調(diào)用函數(shù)在JavaScript的日常開(kāi)發(fā)中尤其是處理模塊化、封裝私有變量或避免全局污染時(shí)我們經(jīng)常會(huì)遇到一個(gè)需求定義一個(gè)函數(shù)并讓它立即執(zhí)行。這種“定義即執(zhí)行”的模式就是所謂的“自調(diào)用函數(shù)”Self-Invoking Function也叫“立即執(zhí)行函數(shù)表達(dá)式”Immediately Invoked Function Expression, IIFE。我第一次接觸這個(gè)概念是在處理一個(gè)老項(xiàng)目遺留的全局變量沖突問(wèn)題時(shí)當(dāng)時(shí)頁(yè)面里引入了多個(gè)第三方庫(kù)變量名$被反復(fù)定義導(dǎo)致功能錯(cuò)亂。為了解決這個(gè)問(wèn)題我不得不將其中一段關(guān)鍵代碼用函數(shù)包裹起來(lái)并立即執(zhí)行從而創(chuàng)建了一個(gè)獨(dú)立的作用域成功隔離了變量。自那以后自調(diào)用函數(shù)就成了我工具箱里的常備利器。簡(jiǎn)單來(lái)說(shuō)自調(diào)用函數(shù)的核心價(jià)值在于創(chuàng)建一個(gè)獨(dú)立的作用域。在ES6的let/const和模塊化語(yǔ)法普及之前JavaScript只有函數(shù)作用域和全局作用域。自調(diào)用函數(shù)能模擬出一個(gè)“塊級(jí)作用域”將變量封裝在內(nèi)部避免泄露到全局這對(duì)于庫(kù)的開(kāi)發(fā)、插件編寫、以及任何需要避免命名沖突的場(chǎng)景都至關(guān)重要。它不僅能管理變量生命周期還能用于初始化代碼、封裝異步邏輯等。本文將深入拆解自調(diào)用函數(shù)的五種經(jīng)典寫法從最基礎(chǔ)的括號(hào)包裹到利用運(yùn)算符特性的巧妙實(shí)現(xiàn)并詳細(xì)分析每種寫法的原理、適用場(chǎng)景以及你可能從未注意過(guò)的細(xì)節(jié)與陷阱。2. 自調(diào)用函數(shù)的五種核心寫法深度解析自調(diào)用函數(shù)的本質(zhì)是一個(gè)函數(shù)表達(dá)式Function Expression而非函數(shù)聲明Function Declaration。JavaScript引擎對(duì)這兩者的處理方式有根本區(qū)別函數(shù)聲明會(huì)被提升Hoisting而函數(shù)表達(dá)式不會(huì)。因此要讓一個(gè)函數(shù)能夠被立即調(diào)用我們必須確保它在語(yǔ)法上是一個(gè)表達(dá)式。下面這五種寫法都是通過(guò)不同的語(yǔ)法手段將函數(shù)定義“轉(zhuǎn)變”為一個(gè)可以立即執(zhí)行的表達(dá)式。2.1 寫法一經(jīng)典的括號(hào)包裹式(function(){})()這是最常見(jiàn)、最經(jīng)典也最容易被初學(xué)者理解的寫法。(function() { console.log(Hello from IIFE!); var privateVar I am private; })(); // 嘗試訪問(wèn)內(nèi)部變量會(huì)報(bào)錯(cuò) console.log(privateVar); // ReferenceError: privateVar is not defined原理剖析 在這段代碼中最外層的圓括號(hào)( )起到了關(guān)鍵作用。在JavaScript語(yǔ)法中圓括號(hào)內(nèi)部的內(nèi)容會(huì)被當(dāng)作一個(gè)表達(dá)式來(lái)求值。當(dāng)我們把function(){...}放入括號(hào)時(shí)它就不再是一個(gè)獨(dú)立的函數(shù)聲明語(yǔ)句而是變成了一個(gè)“函數(shù)表達(dá)式”。這個(gè)表達(dá)式求值的結(jié)果就是這個(gè)函數(shù)本身。緊接著我們?cè)诒磉_(dá)式后面加上另一對(duì)括號(hào)()就相當(dāng)于調(diào)用了這個(gè)剛剛求值得到的函數(shù)對(duì)象。為什么函數(shù)聲明不能直接調(diào)用你可以嘗試寫function(){console.log(test)}()這會(huì)立即導(dǎo)致語(yǔ)法錯(cuò)誤。因?yàn)橐嬖诮馕鰰r(shí)遇到function關(guān)鍵字開(kāi)頭會(huì)認(rèn)為這是一個(gè)函數(shù)聲明語(yǔ)句的開(kāi)始。而函數(shù)聲明語(yǔ)句需要一個(gè)函數(shù)名并且不允許后面直接跟調(diào)用括號(hào)。圓括號(hào)強(qiáng)制改變了語(yǔ)法解析的上下文使其變?yōu)楸磉_(dá)式。實(shí)操要點(diǎn)與避坑指南分號(hào)的重要性在IIFE前面務(wù)必確保有分號(hào)或上下文明確?？紤]以下危險(xiǎn)代碼var library SomeLib (function() { // 你的代碼 })()這段代碼會(huì)報(bào)錯(cuò)因?yàn)橐鏁?huì)嘗試將(function...解釋為對(duì)SomeLib這個(gè)值的函數(shù)調(diào)用即SomeLib(function() {...})()這顯然不合理。安全的做法是在IIFE前加分號(hào)或者更推薦的是在文件開(kāi)頭就使用IIFE包裹所有代碼。;(function() { // 安全的代碼 })()傳參的應(yīng)用IIFE可以接收參數(shù)這常用于將全局對(duì)象以參數(shù)形式傳入縮短作用域鏈查找時(shí)間并兼容壓縮工具。(function(global, doc) { // 在內(nèi)部global 指向 window, doc 指向 document global.console.log(doc.title); })(window, document);這樣做有兩個(gè)好處一是代碼壓縮工具可以將參數(shù)名global、doc壓縮成單字母而外部傳入的window、document是關(guān)鍵字無(wú)法壓縮從而優(yōu)化體積二是在函數(shù)內(nèi)部訪問(wèn)global比訪問(wèn)window更快因?yàn)閣indow是全局對(duì)象查找需要遍歷作用域鏈。2.2 寫法二括號(hào)后置式(function(){}())這種寫法由Douglas CrockfordJSLint的創(chuàng)建者推廣他認(rèn)為將調(diào)用括號(hào)放在外層括號(hào)內(nèi)邏輯上更清晰整個(gè)單元定義調(diào)用都被包裹在括號(hào)里。(function() { console.log(IIFE with grouping parentheses around execution); }());原理剖析 這里的原理與寫法一完全相同都是利用外層括號(hào)將函數(shù)定義變?yōu)楸磉_(dá)式。區(qū)別僅僅在于調(diào)用括號(hào)()的位置。在(function(){})()中外層括號(hào)只包裹了函數(shù)體而在(function(){}())中外層括號(hào)包裹了“函數(shù)體調(diào)用括號(hào)”這個(gè)整體。從求值順序看沒(méi)有區(qū)別都是先求值得到函數(shù)對(duì)象然后調(diào)用它。風(fēng)格之爭(zhēng)與選擇 這更多是一種編碼風(fēng)格偏好。我個(gè)人在團(tuán)隊(duì)協(xié)作中更傾向于第一種(function(){})()因?yàn)橐曈X(jué)上函數(shù)定義function(){}是一個(gè)完整的塊后面的()清晰地表示“立即調(diào)用”分離度更好在閱讀代碼時(shí)更容易一眼識(shí)別。而第二種寫法將所有東西包在一個(gè)括號(hào)里對(duì)于新手來(lái)說(shuō)可能有點(diǎn)迷惑。但無(wú)論哪種只要團(tuán)隊(duì)統(tǒng)一即可。一些靜態(tài)代碼分析工具如早期的JSLint可能推薦第二種但現(xiàn)代工具如ESLint通常不再?gòu)?qiáng)制。2.3 寫法三一元運(yùn)算符前綴式!function(){}()這是一種非常簡(jiǎn)潔且常見(jiàn)的寫法利用了JavaScript中運(yùn)算符的特性。!function() { console.log(IIFE using logical NOT); }();原理剖析 這里的魔法在于前綴的感嘆號(hào)!。!是邏輯非運(yùn)算符它需要一個(gè)操作數(shù)。當(dāng)引擎解析到!時(shí)它期望后面跟著一個(gè)表達(dá)式。因此function(){}就被迫在這個(gè)上下文中被解釋為一個(gè)函數(shù)表達(dá)式以滿足!對(duì)操作數(shù)的需求。整個(gè)表達(dá)式!function(){}()的求值過(guò)程是先執(zhí)行函數(shù)調(diào)用然后將函數(shù)返回值如果函數(shù)沒(méi)有return則是undefined進(jìn)行邏輯非運(yùn)算。因?yàn)閡ndefined進(jìn)行邏輯非運(yùn)算后結(jié)果為true所以整個(gè)IIFE表達(dá)式的最終值是true但這個(gè)值通常我們并不關(guān)心。其他一元運(yùn)算符 除了!其他一元運(yùn)算符如,-,~,void也可以實(shí)現(xiàn)同樣的效果。function() { console.log(Plus); }(); -function() { console.log(Minus); }(); ~function() { console.log(Bitwise NOT); }(); void function() { console.log(Void); }();void運(yùn)算符尤其值得一說(shuō)因?yàn)樗鼤?huì)明確地將表達(dá)式結(jié)果定義為undefined且語(yǔ)義上“忽略返回值”的意圖很清晰。在一些特殊的代碼模式或壓縮工具中可能會(huì)見(jiàn)到。注意事項(xiàng)返回值被轉(zhuǎn)換使用運(yùn)算符前綴的IIFE其返回值會(huì)被運(yùn)算符處理。如果你需要獲取IIFE的返回值這種寫法就不太方便雖然可以通過(guò)賦值給變量再操作但顯得別扭。代碼意圖!或等符號(hào)可能會(huì)讓不熟悉這種模式的開(kāi)發(fā)者感到困惑認(rèn)為這里有邏輯或數(shù)學(xué)運(yùn)算。在團(tuán)隊(duì)項(xiàng)目中如果并非所有人都熟悉這種“黑話”使用經(jīng)典的括號(hào)包裹式可能溝通成本更低。2.4 寫法四利用new關(guān)鍵字new function(){}這種寫法不太常見(jiàn)但揭示了JavaScript中構(gòu)造函數(shù)調(diào)用的另一種可能性。var result new function() { this.greeting Hello; console.log(IIFE using new keyword); }; console.log(result.greeting); // Hello原理剖析new關(guān)鍵字后面必須跟一個(gè)構(gòu)造函數(shù)。在這里function(){}被當(dāng)作構(gòu)造函數(shù)雖然它沒(méi)有名字。new操作符會(huì)做幾件事1) 創(chuàng)建一個(gè)新的空對(duì)象2) 將這個(gè)新對(duì)象的原型指向構(gòu)造函數(shù)的prototype屬性3) 執(zhí)行構(gòu)造函數(shù)并將this綁定到新創(chuàng)建的對(duì)象上4) 如果構(gòu)造函數(shù)沒(méi)有返回其他對(duì)象則返回這個(gè)新對(duì)象。因此new function(){}會(huì)立即執(zhí)行這個(gè)函數(shù)并返回一個(gè)新創(chuàng)建的對(duì)象。與經(jīng)典IIFE的關(guān)鍵區(qū)別this的指向在函數(shù)內(nèi)部this指向新創(chuàng)建的那個(gè)實(shí)例對(duì)象而不是默認(rèn)的全局對(duì)象瀏覽器中是window或undefined嚴(yán)格模式下。這為你提供了一個(gè)現(xiàn)成的、干凈的容器對(duì)象來(lái)存放屬性和方法。返回值它返回的是一個(gè)對(duì)象實(shí)例而不是函數(shù)的返回值。如果你想返回一個(gè)特定的值需要在函數(shù)內(nèi)部使用return語(yǔ)句并且注意如果return的是一個(gè)對(duì)象則會(huì)覆蓋默認(rèn)返回的this實(shí)例。適用場(chǎng)景 當(dāng)你需要立即創(chuàng)建一個(gè)對(duì)象并且這個(gè)對(duì)象的初始化邏輯比較復(fù)雜適合寫在一個(gè)函數(shù)里時(shí)可以使用這種模式。它相當(dāng)于一個(gè)一次性的構(gòu)造函數(shù)。但請(qǐng)注意由于它創(chuàng)建了一個(gè)新的原型鏈指向Function.prototype如果只是為了執(zhí)行一些代碼并封裝變量可能有些“殺雞用牛刀”且性能上略有多余開(kāi)銷。2.5 寫法五ES6箭頭函數(shù)式(() {})()隨著ES6的普及箭頭函數(shù)為IIFE帶來(lái)了更簡(jiǎn)潔的語(yǔ)法。(() { console.log(IIFE using arrow function); const secret ES6 is cool; })();原理剖析 箭頭函數(shù)() {}本身就是一個(gè)表達(dá)式。因此我們不再需要外層的括號(hào)來(lái)將其轉(zhuǎn)換為表達(dá)式盡管有時(shí)為了清晰還是會(huì)加。直接在其后跟調(diào)用括號(hào)()即可立即執(zhí)行。這是語(yǔ)法上的天然優(yōu)勢(shì)。與傳統(tǒng)匿名函數(shù)的對(duì)比與注意事項(xiàng)沒(méi)有arguments對(duì)象箭頭函數(shù)內(nèi)部沒(méi)有自己的arguments對(duì)象。如果需要使用類數(shù)組的arguments必須使用傳統(tǒng)的function關(guān)鍵字。(function() { console.log(arguments[0]); // 1 })(1); (() { console.log(arguments[0]); // ReferenceError: arguments is not defined })(1);沒(méi)有自己的this箭頭函數(shù)的this繼承自定義時(shí)所在的作用域。這在IIFE中通常是件好事因?yàn)樗苊饬藗鹘y(tǒng)函數(shù)中this指向的混亂問(wèn)題。但如果你依賴IIFE創(chuàng)建一個(gè)新的this上下文例如在某些設(shè)計(jì)模式中則不能使用箭頭函數(shù)。不能作為構(gòu)造函數(shù)箭頭函數(shù)不能使用new調(diào)用因此寫法四的模式不適用于箭頭函數(shù)。更簡(jiǎn)潔的返回值如果函數(shù)體只有一條返回語(yǔ)句可以省略大括號(hào)和return使得返回值的IIFE非常簡(jiǎn)潔。const value (() 42)(); // value 等于 42現(xiàn)代開(kāi)發(fā)中的選擇 在現(xiàn)代前端工程中由于ES6模塊import/export已經(jīng)提供了完美的模塊化和作用域隔離IIFE的使用頻率已經(jīng)大大下降。但在一些特定場(chǎng)景下如快速創(chuàng)建一個(gè)獨(dú)立作用域執(zhí)行腳本、在非模塊化環(huán)境中封裝代碼、或編寫需要兼容老舊瀏覽器的庫(kù)時(shí)IIFE依然有價(jià)值。此時(shí)箭頭函數(shù)IIFE因其簡(jiǎn)潔性成為我的首選前提是不需要用到arguments或特定的this。3. 自調(diào)用函數(shù)的實(shí)戰(zhàn)應(yīng)用場(chǎng)景與高級(jí)技巧理解了五種寫法我們更需要知道在什么情況下使用它們以及如何用得巧妙。下面結(jié)合幾個(gè)實(shí)戰(zhàn)場(chǎng)景深入探討IIFE的高級(jí)應(yīng)用。3.1 場(chǎng)景一模塊模式與私有變量封裝在jQuery時(shí)代這是IIFE最經(jīng)典的用法。創(chuàng)建一個(gè)獨(dú)立的模塊暴露有限的接口隱藏內(nèi)部實(shí)現(xiàn)細(xì)節(jié)。var MyModule (function() { // 私有變量外部無(wú)法直接訪問(wèn) var privateCounter 0; var privateName Secret; // 私有函數(shù) function privateLog() { console.log(Private call: privateCounter); } // 返回一個(gè)對(duì)象包含公開(kāi)的API return { increment: function() { privateCounter; privateLog(); return this; // 支持鏈?zhǔn)秸{(diào)用 }, getName: function() { return privateName; }, getCount: function() { return privateCounter; } }; })(); // 使用公開(kāi)的API MyModule.increment().increment(); console.log(MyModule.getCount()); // 2 console.log(MyModule.getName()); // Secret console.log(MyModule.privateCounter); // undefined技巧返回的對(duì)象中方法通過(guò)閉包Closure持續(xù)訪問(wèn)著IIFE作用域內(nèi)的私有變量privateCounter和privateName。這就是“模塊模式”的精髓。你可以通過(guò)返回不同的對(duì)象結(jié)構(gòu)實(shí)現(xiàn)單例、工廠等不同模式。3.2 場(chǎng)景二循環(huán)中的變量捕獲問(wèn)題這是一個(gè)經(jīng)典面試題也是IIFE解決實(shí)際問(wèn)題的典型案例。在沒(méi)有塊級(jí)作用域的時(shí)代循環(huán)中創(chuàng)建異步回調(diào)會(huì)出問(wèn)題。// 問(wèn)題代碼所有按鈕點(diǎn)擊都打印“Button 5 clicked” for (var i 0; i 5; i) { var btn document.createElement(button); btn.textContent Button i; btn.onclick function() { console.log(Button i clicked); }; document.body.appendChild(btn); } // 循環(huán)結(jié)束時(shí)i的值已經(jīng)是5。所有回調(diào)函數(shù)共享同一個(gè)i的引用。 // 解決方案使用IIFE為每次迭代創(chuàng)建獨(dú)立的作用域 for (var i 0; i 5; i) { (function(capturedI) { var btn document.createElement(button); btn.textContent Button capturedI; btn.onclick function() { console.log(Button capturedI clicked); }; document.body.appendChild(btn); })(i); // 將當(dāng)前的i值作為參數(shù)傳入 }原理在每次循環(huán)迭代時(shí)IIFE立即執(zhí)行并將當(dāng)前的i的值作為參數(shù)capturedI傳入。由于參數(shù)是基本類型數(shù)字它被按值傳遞每個(gè)IIFE都擁有自己的一份capturedI拷貝。這樣每個(gè)點(diǎn)擊回調(diào)函數(shù)閉包捕獲的就是各自IIFE作用域內(nèi)的capturedI從而得到正確的值?，F(xiàn)代解決方案在ES6之后我們只需將var改為let因?yàn)閘et擁有塊級(jí)作用域問(wèn)題自然解決。for循環(huán)頭部的let i會(huì)為每次迭代創(chuàng)建一個(gè)新的綁定效果與上述IIFE類似但語(yǔ)法簡(jiǎn)潔得多。這反過(guò)來(lái)說(shuō)明了IIFE在歷史上扮演的“模擬塊級(jí)作用域”的重要角色。3.3 場(chǎng)景三庫(kù)的封裝與全局對(duì)象注入編寫一個(gè)第三方庫(kù)時(shí)必須考慮不能污染全局命名空間同時(shí)也要妥善處理與其它庫(kù)的兼容性。// 我的庫(kù) myLib.js (function(global, factory) { // 判斷環(huán)境支持CommonJS、AMD和瀏覽器全局變量 if (typeof module object typeof module.exports object) { module.exports factory(); } else if (typeof define function define.amd) { define(factory); } else { global.MyAwesomeLib factory(); } })(typeof window ! undefined ? window : this, function() { // 庫(kù)的實(shí)際工廠函數(shù) var version 1.0.0; function privateHelper() { // 私有方法 } function publicApi() { console.log(MyAwesomeLib v version is ready!); } // 暴露公共API return { init: publicApi, // ... 其他方法 }; });設(shè)計(jì)解析外層IIFE接收global和factory兩個(gè)參數(shù)。global參數(shù)通過(guò)三元表達(dá)式判斷兼容瀏覽器環(huán)境window和Node.js等非瀏覽器環(huán)境this在全局作用域下指向全局對(duì)象。factory參數(shù)是真正定義庫(kù)的函數(shù)。UMD模式在IIFE內(nèi)部通過(guò)判斷module.exports和define是否存在來(lái)檢測(cè)當(dāng)前是CommonJS如Node.js、AMD如RequireJS還是普通瀏覽器環(huán)境從而將庫(kù)的導(dǎo)出適配到不同的模塊系統(tǒng)。這是一種通用的封裝模式Universal Module Definition。安全與兼容整個(gè)庫(kù)的代碼都在IIFE內(nèi)部不會(huì)意外聲明任何全局變量。通過(guò)參數(shù)傳入global既明確了依賴也方便代碼壓縮。3.4 場(chǎng)景四異步代碼的立即封裝在引入async/await之前處理異步流時(shí)為了立即執(zhí)行一個(gè)異步函數(shù)并避免Promise鏈的冗長(zhǎng)有時(shí)會(huì)用到IIFE。// 在頂層作用域無(wú)法直接使用await需要包裹 (async function() { try { const data await fetch(/api/data).then(r r.json()); const processed await processData(data); console.log(Result:, processed); } catch (error) { console.error(Failed:, error); } })(); // 使用箭頭函數(shù)形式同樣可以 (async () { // ... async operations })();說(shuō)明await關(guān)鍵字必須在async函數(shù)內(nèi)部使用。在腳本的頂層作用域非模塊內(nèi)如果我們想立即執(zhí)行一段異步邏輯就必須將其包裹在一個(gè)async函數(shù)中并立即調(diào)用。這就是一個(gè)異步IIFEAsync IIFE。它創(chuàng)建了一個(gè)獨(dú)立的異步執(zhí)行上下文。4. 常見(jiàn)陷阱、性能考量與現(xiàn)代替代方案即使掌握了寫法與應(yīng)用在實(shí)際使用中仍有一些細(xì)節(jié)需要注意。4.1 陷阱一嚴(yán)格模式的作用域如果你在IIFE內(nèi)使用嚴(yán)格模式use strict;它的影響僅限于該IIFE內(nèi)部。(function() { use strict; undeclaredVar 10; // 這里會(huì)拋出ReferenceError })(); undeclaredVar 20; // 這里不會(huì)報(bào)錯(cuò)假設(shè)在非嚴(yán)格模式的全局下這是一個(gè)優(yōu)點(diǎn)它允許你在自己的模塊中啟用嚴(yán)格的代碼檢查而不會(huì)影響其他可能未采用嚴(yán)格模式的第三方代碼。4.2 陷阱二IIFE的返回值與賦值IIFE可以返回值這個(gè)值可以賦給一個(gè)變量。這在模塊模式中已經(jīng)看到。const calculator (function() { let memory 0; return { add: x memory x, get: () memory }; })(); calculator.add(5); console.log(calculator.get()); // 5但要注意如果你不需要返回值就不要賦值。一個(gè)沒(méi)有返回值的IIFE其執(zhí)行結(jié)果默認(rèn)是undefined。將其賦值給變量通常沒(méi)有意義除非你特意想得到undefined。4.3 性能考量真的需要嗎在現(xiàn)代JavaScript引擎V8, SpiderMonkey等中創(chuàng)建一個(gè)函數(shù)作用域會(huì)有微小的開(kāi)銷。對(duì)于性能極度敏感的代碼段需要權(quán)衡。然而在絕大多數(shù)應(yīng)用中這種開(kāi)銷可以忽略不計(jì)。IIFE帶來(lái)的代碼組織、避免污染、邏輯清晰的好處遠(yuǎn)大于其微小的性能成本。更重要的是隨著ES6普及許多IIFE的使用場(chǎng)景有了更優(yōu)解塊級(jí)作用域用let和const代替var從根本上解決了循環(huán)變量捕獲等問(wèn)題無(wú)需IIFE。ES6模塊使用import和export語(yǔ)言層面提供了完美的模塊化方案無(wú)需再用IIFE模擬模塊。閉包創(chuàng)建有時(shí)只是為了創(chuàng)建一個(gè)閉包現(xiàn)在可以考慮使用更輕量的代碼塊{}配合let/const。4.4 代碼壓縮與IIFE代碼壓縮工具如UglifyJS、Terser非常擅長(zhǎng)處理IIFE。它們會(huì)進(jìn)行“函數(shù)內(nèi)聯(lián)”等優(yōu)化甚至可能將一些簡(jiǎn)單的IIFE直接展開(kāi)。你無(wú)需擔(dān)心IIFE會(huì)給最終打包體積帶來(lái)額外負(fù)擔(dān)。事實(shí)上通過(guò)IIFE將代碼模塊化反而有助于壓縮工具進(jìn)行更有效的死代碼消除。5. 總結(jié)與個(gè)人實(shí)踐建議回顧這五種寫法從經(jīng)典的括號(hào)包裹到利用運(yùn)算符再到new和箭頭函數(shù)它們共同的核心都是將函數(shù)定義轉(zhuǎn)化為可立即執(zhí)行的表達(dá)式。理解這個(gè)核心你就能看透所有變體的本質(zhì)。在我的日常開(kāi)發(fā)中選擇哪種寫法主要取決于上下文和團(tuán)隊(duì)約定對(duì)于新的個(gè)人項(xiàng)目或ES6環(huán)境我優(yōu)先使用箭頭函數(shù)形式的IIFE(() {})()因?yàn)樗詈?jiǎn)潔明了。如果函數(shù)體稍復(fù)雜或需要用到arguments則退回使用經(jīng)典括號(hào)包裹式。對(duì)于需要明確返回值或復(fù)雜模塊封裝的場(chǎng)景經(jīng)典括號(hào)包裹式(function(){})()或(function(){}())仍然是可靠的選擇結(jié)構(gòu)清晰傳參方便。在閱讀或維護(hù)老舊代碼庫(kù)時(shí)你會(huì)遇到所有這五種寫法甚至更多變體。理解它們的原理能幫助你快速上手。一個(gè)重要的習(xí)慣如果文件中的代碼不是從IIFE開(kāi)始那么在IIFE前加上一個(gè)分號(hào);這是一個(gè)防御性的好習(xí)慣可以避免因文件合并導(dǎo)致的語(yǔ)法錯(cuò)誤。最后雖然IIFE是JavaScript發(fā)展史上一個(gè)重要的模式但在今天我們有了更多強(qiáng)大的原生工具模塊、塊級(jí)作用域。我的建議是理解IIFE但不必濫用。在新項(xiàng)目中優(yōu)先使用ES6模塊來(lái)組織代碼用let/const來(lái)管理變量作用域。將IIFE視為一個(gè)仍然有用的工具用于那些特定的、模塊化不適用或需要兼容老舊環(huán)境的場(chǎng)景。它像是一把瑞士軍刀不一定每天用到但知道它每個(gè)部件的用法能在關(guān)鍵時(shí)刻優(yōu)雅地解決問(wèn)題。 JavaScript自調(diào)用函數(shù)(IIFE)五種寫法詳解與應(yīng)用場(chǎng)景
1. 項(xiàng)目概述為什么我們需要自調(diào)用函數(shù)在JavaScript的日常開(kāi)發(fā)中尤其是處理模塊化、封裝私有變量或避免全局污染時(shí)我們經(jīng)常會(huì)遇到一個(gè)需求定義一個(gè)函數(shù)并讓它立即執(zhí)行。這種“定義即執(zhí)行”的模式就是所謂的“自調(diào)用函數(shù)”Self-Invoking Function也叫“立即執(zhí)行函數(shù)表達(dá)式”Immediately Invoked Function Expression, IIFE。我第一次接觸這個(gè)概念是在處理一個(gè)老項(xiàng)目遺留的全局變量沖突問(wèn)題時(shí)當(dāng)時(shí)頁(yè)面里引入了多個(gè)第三方庫(kù)變量名$被反復(fù)定義導(dǎo)致功能錯(cuò)亂。為了解決這個(gè)問(wèn)題我不得不將其中一段關(guān)鍵代碼用函數(shù)包裹起來(lái)并立即執(zhí)行從而創(chuàng)建了一個(gè)獨(dú)立的作用域成功隔離了變量。自那以后自調(diào)用函數(shù)就成了我工具箱里的常備利器。簡(jiǎn)單來(lái)說(shuō)自調(diào)用函數(shù)的核心價(jià)值在于創(chuàng)建一個(gè)獨(dú)立的作用域。在ES6的let/const和模塊化語(yǔ)法普及之前JavaScript只有函數(shù)作用域和全局作用域。自調(diào)用函數(shù)能模擬出一個(gè)“塊級(jí)作用域”將變量封裝在內(nèi)部避免泄露到全局這對(duì)于庫(kù)的開(kāi)發(fā)、插件編寫、以及任何需要避免命名沖突的場(chǎng)景都至關(guān)重要。它不僅能管理變量生命周期還能用于初始化代碼、封裝異步邏輯等。本文將深入拆解自調(diào)用函數(shù)的五種經(jīng)典寫法從最基礎(chǔ)的括號(hào)包裹到利用運(yùn)算符特性的巧妙實(shí)現(xiàn)并詳細(xì)分析每種寫法的原理、適用場(chǎng)景以及你可能從未注意過(guò)的細(xì)節(jié)與陷阱。2. 自調(diào)用函數(shù)的五種核心寫法深度解析自調(diào)用函數(shù)的本質(zhì)是一個(gè)函數(shù)表達(dá)式Function Expression而非函數(shù)聲明Function Declaration。JavaScript引擎對(duì)這兩者的處理方式有根本區(qū)別函數(shù)聲明會(huì)被提升Hoisting而函數(shù)表達(dá)式不會(huì)。因此要讓一個(gè)函數(shù)能夠被立即調(diào)用我們必須確保它在語(yǔ)法上是一個(gè)表達(dá)式。下面這五種寫法都是通過(guò)不同的語(yǔ)法手段將函數(shù)定義“轉(zhuǎn)變”為一個(gè)可以立即執(zhí)行的表達(dá)式。2.1 寫法一經(jīng)典的括號(hào)包裹式(function(){})()這是最常見(jiàn)、最經(jīng)典也最容易被初學(xué)者理解的寫法。(function() { console.log(Hello from IIFE!); var privateVar I am private; })(); // 嘗試訪問(wèn)內(nèi)部變量會(huì)報(bào)錯(cuò) console.log(privateVar); // ReferenceError: privateVar is not defined原理剖析 在這段代碼中最外層的圓括號(hào)( )起到了關(guān)鍵作用。在JavaScript語(yǔ)法中圓括號(hào)內(nèi)部的內(nèi)容會(huì)被當(dāng)作一個(gè)表達(dá)式來(lái)求值。當(dāng)我們把function(){...}放入括號(hào)時(shí)它就不再是一個(gè)獨(dú)立的函數(shù)聲明語(yǔ)句而是變成了一個(gè)“函數(shù)表達(dá)式”。這個(gè)表達(dá)式求值的結(jié)果就是這個(gè)函數(shù)本身。緊接著我們?cè)诒磉_(dá)式后面加上另一對(duì)括號(hào)()就相當(dāng)于調(diào)用了這個(gè)剛剛求值得到的函數(shù)對(duì)象。為什么函數(shù)聲明不能直接調(diào)用你可以嘗試寫function(){console.log(test)}()這會(huì)立即導(dǎo)致語(yǔ)法錯(cuò)誤。因?yàn)橐嬖诮馕鰰r(shí)遇到function關(guān)鍵字開(kāi)頭會(huì)認(rèn)為這是一個(gè)函數(shù)聲明語(yǔ)句的開(kāi)始。而函數(shù)聲明語(yǔ)句需要一個(gè)函數(shù)名并且不允許后面直接跟調(diào)用括號(hào)。圓括號(hào)強(qiáng)制改變了語(yǔ)法解析的上下文使其變?yōu)楸磉_(dá)式。實(shí)操要點(diǎn)與避坑指南分號(hào)的重要性在IIFE前面務(wù)必確保有分號(hào)或上下文明確?？紤]以下危險(xiǎn)代碼var library SomeLib (function() { // 你的代碼 })()這段代碼會(huì)報(bào)錯(cuò)因?yàn)橐鏁?huì)嘗試將(function...解釋為對(duì)SomeLib這個(gè)值的函數(shù)調(diào)用即SomeLib(function() {...})()這顯然不合理。安全的做法是在IIFE前加分號(hào)或者更推薦的是在文件開(kāi)頭就使用IIFE包裹所有代碼。;(function() { // 安全的代碼 })()傳參的應(yīng)用IIFE可以接收參數(shù)這常用于將全局對(duì)象以參數(shù)形式傳入縮短作用域鏈查找時(shí)間并兼容壓縮工具。(function(global, doc) { // 在內(nèi)部global 指向 window, doc 指向 document global.console.log(doc.title); })(window, document);這樣做有兩個(gè)好處一是代碼壓縮工具可以將參數(shù)名global、doc壓縮成單字母而外部傳入的window、document是關(guān)鍵字無(wú)法壓縮從而優(yōu)化體積二是在函數(shù)內(nèi)部訪問(wèn)global比訪問(wèn)window更快因?yàn)閣indow是全局對(duì)象查找需要遍歷作用域鏈。2.2 寫法二括號(hào)后置式(function(){}())這種寫法由Douglas CrockfordJSLint的創(chuàng)建者推廣他認(rèn)為將調(diào)用括號(hào)放在外層括號(hào)內(nèi)邏輯上更清晰整個(gè)單元定義調(diào)用都被包裹在括號(hào)里。(function() { console.log(IIFE with grouping parentheses around execution); }());原理剖析 這里的原理與寫法一完全相同都是利用外層括號(hào)將函數(shù)定義變?yōu)楸磉_(dá)式。區(qū)別僅僅在于調(diào)用括號(hào)()的位置。在(function(){})()中外層括號(hào)只包裹了函數(shù)體而在(function(){}())中外層括號(hào)包裹了“函數(shù)體調(diào)用括號(hào)”這個(gè)整體。從求值順序看沒(méi)有區(qū)別都是先求值得到函數(shù)對(duì)象然后調(diào)用它。風(fēng)格之爭(zhēng)與選擇 這更多是一種編碼風(fēng)格偏好。我個(gè)人在團(tuán)隊(duì)協(xié)作中更傾向于第一種(function(){})()因?yàn)橐曈X(jué)上函數(shù)定義function(){}是一個(gè)完整的塊后面的()清晰地表示“立即調(diào)用”分離度更好在閱讀代碼時(shí)更容易一眼識(shí)別。而第二種寫法將所有東西包在一個(gè)括號(hào)里對(duì)于新手來(lái)說(shuō)可能有點(diǎn)迷惑。但無(wú)論哪種只要團(tuán)隊(duì)統(tǒng)一即可。一些靜態(tài)代碼分析工具如早期的JSLint可能推薦第二種但現(xiàn)代工具如ESLint通常不再?gòu)?qiáng)制。2.3 寫法三一元運(yùn)算符前綴式!function(){}()這是一種非常簡(jiǎn)潔且常見(jiàn)的寫法利用了JavaScript中運(yùn)算符的特性。!function() { console.log(IIFE using logical NOT); }();原理剖析 這里的魔法在于前綴的感嘆號(hào)!。!是邏輯非運(yùn)算符它需要一個(gè)操作數(shù)。當(dāng)引擎解析到!時(shí)它期望后面跟著一個(gè)表達(dá)式。因此function(){}就被迫在這個(gè)上下文中被解釋為一個(gè)函數(shù)表達(dá)式以滿足!對(duì)操作數(shù)的需求。整個(gè)表達(dá)式!function(){}()的求值過(guò)程是先執(zhí)行函數(shù)調(diào)用然后將函數(shù)返回值如果函數(shù)沒(méi)有return則是undefined進(jìn)行邏輯非運(yùn)算。因?yàn)閡ndefined進(jìn)行邏輯非運(yùn)算后結(jié)果為true所以整個(gè)IIFE表達(dá)式的最終值是true但這個(gè)值通常我們并不關(guān)心。其他一元運(yùn)算符 除了!其他一元運(yùn)算符如,-,~,void也可以實(shí)現(xiàn)同樣的效果。function() { console.log(Plus); }(); -function() { console.log(Minus); }(); ~function() { console.log(Bitwise NOT); }(); void function() { console.log(Void); }();void運(yùn)算符尤其值得一說(shuō)因?yàn)樗鼤?huì)明確地將表達(dá)式結(jié)果定義為undefined且語(yǔ)義上“忽略返回值”的意圖很清晰。在一些特殊的代碼模式或壓縮工具中可能會(huì)見(jiàn)到。注意事項(xiàng)返回值被轉(zhuǎn)換使用運(yùn)算符前綴的IIFE其返回值會(huì)被運(yùn)算符處理。如果你需要獲取IIFE的返回值這種寫法就不太方便雖然可以通過(guò)賦值給變量再操作但顯得別扭。代碼意圖!或等符號(hào)可能會(huì)讓不熟悉這種模式的開(kāi)發(fā)者感到困惑認(rèn)為這里有邏輯或數(shù)學(xué)運(yùn)算。在團(tuán)隊(duì)項(xiàng)目中如果并非所有人都熟悉這種“黑話”使用經(jīng)典的括號(hào)包裹式可能溝通成本更低。2.4 寫法四利用new關(guān)鍵字new function(){}這種寫法不太常見(jiàn)但揭示了JavaScript中構(gòu)造函數(shù)調(diào)用的另一種可能性。var result new function() { this.greeting Hello; console.log(IIFE using new keyword); }; console.log(result.greeting); // Hello原理剖析new關(guān)鍵字后面必須跟一個(gè)構(gòu)造函數(shù)。在這里function(){}被當(dāng)作構(gòu)造函數(shù)雖然它沒(méi)有名字。new操作符會(huì)做幾件事1) 創(chuàng)建一個(gè)新的空對(duì)象2) 將這個(gè)新對(duì)象的原型指向構(gòu)造函數(shù)的prototype屬性3) 執(zhí)行構(gòu)造函數(shù)并將this綁定到新創(chuàng)建的對(duì)象上4) 如果構(gòu)造函數(shù)沒(méi)有返回其他對(duì)象則返回這個(gè)新對(duì)象。因此new function(){}會(huì)立即執(zhí)行這個(gè)函數(shù)并返回一個(gè)新創(chuàng)建的對(duì)象。與經(jīng)典IIFE的關(guān)鍵區(qū)別this的指向在函數(shù)內(nèi)部this指向新創(chuàng)建的那個(gè)實(shí)例對(duì)象而不是默認(rèn)的全局對(duì)象瀏覽器中是window或undefined嚴(yán)格模式下。這為你提供了一個(gè)現(xiàn)成的、干凈的容器對(duì)象來(lái)存放屬性和方法。返回值它返回的是一個(gè)對(duì)象實(shí)例而不是函數(shù)的返回值。如果你想返回一個(gè)特定的值需要在函數(shù)內(nèi)部使用return語(yǔ)句并且注意如果return的是一個(gè)對(duì)象則會(huì)覆蓋默認(rèn)返回的this實(shí)例。適用場(chǎng)景 當(dāng)你需要立即創(chuàng)建一個(gè)對(duì)象并且這個(gè)對(duì)象的初始化邏輯比較復(fù)雜適合寫在一個(gè)函數(shù)里時(shí)可以使用這種模式。它相當(dāng)于一個(gè)一次性的構(gòu)造函數(shù)。但請(qǐng)注意由于它創(chuàng)建了一個(gè)新的原型鏈指向Function.prototype如果只是為了執(zhí)行一些代碼并封裝變量可能有些“殺雞用牛刀”且性能上略有多余開(kāi)銷。2.5 寫法五ES6箭頭函數(shù)式(() {})()隨著ES6的普及箭頭函數(shù)為IIFE帶來(lái)了更簡(jiǎn)潔的語(yǔ)法。(() { console.log(IIFE using arrow function); const secret ES6 is cool; })();原理剖析 箭頭函數(shù)() {}本身就是一個(gè)表達(dá)式。因此我們不再需要外層的括號(hào)來(lái)將其轉(zhuǎn)換為表達(dá)式盡管有時(shí)為了清晰還是會(huì)加。直接在其后跟調(diào)用括號(hào)()即可立即執(zhí)行。這是語(yǔ)法上的天然優(yōu)勢(shì)。與傳統(tǒng)匿名函數(shù)的對(duì)比與注意事項(xiàng)沒(méi)有arguments對(duì)象箭頭函數(shù)內(nèi)部沒(méi)有自己的arguments對(duì)象。如果需要使用類數(shù)組的arguments必須使用傳統(tǒng)的function關(guān)鍵字。(function() { console.log(arguments[0]); // 1 })(1); (() { console.log(arguments[0]); // ReferenceError: arguments is not defined })(1);沒(méi)有自己的this箭頭函數(shù)的this繼承自定義時(shí)所在的作用域。這在IIFE中通常是件好事因?yàn)樗苊饬藗鹘y(tǒng)函數(shù)中this指向的混亂問(wèn)題。但如果你依賴IIFE創(chuàng)建一個(gè)新的this上下文例如在某些設(shè)計(jì)模式中則不能使用箭頭函數(shù)。不能作為構(gòu)造函數(shù)箭頭函數(shù)不能使用new調(diào)用因此寫法四的模式不適用于箭頭函數(shù)。更簡(jiǎn)潔的返回值如果函數(shù)體只有一條返回語(yǔ)句可以省略大括號(hào)和return使得返回值的IIFE非常簡(jiǎn)潔。const value (() 42)(); // value 等于 42現(xiàn)代開(kāi)發(fā)中的選擇 在現(xiàn)代前端工程中由于ES6模塊import/export已經(jīng)提供了完美的模塊化和作用域隔離IIFE的使用頻率已經(jīng)大大下降。但在一些特定場(chǎng)景下如快速創(chuàng)建一個(gè)獨(dú)立作用域執(zhí)行腳本、在非模塊化環(huán)境中封裝代碼、或編寫需要兼容老舊瀏覽器的庫(kù)時(shí)IIFE依然有價(jià)值。此時(shí)箭頭函數(shù)IIFE因其簡(jiǎn)潔性成為我的首選前提是不需要用到arguments或特定的this。3. 自調(diào)用函數(shù)的實(shí)戰(zhàn)應(yīng)用場(chǎng)景與高級(jí)技巧理解了五種寫法我們更需要知道在什么情況下使用它們以及如何用得巧妙。下面結(jié)合幾個(gè)實(shí)戰(zhàn)場(chǎng)景深入探討IIFE的高級(jí)應(yīng)用。3.1 場(chǎng)景一模塊模式與私有變量封裝在jQuery時(shí)代這是IIFE最經(jīng)典的用法。創(chuàng)建一個(gè)獨(dú)立的模塊暴露有限的接口隱藏內(nèi)部實(shí)現(xiàn)細(xì)節(jié)。var MyModule (function() { // 私有變量外部無(wú)法直接訪問(wèn) var privateCounter 0; var privateName Secret; // 私有函數(shù) function privateLog() { console.log(Private call: privateCounter); } // 返回一個(gè)對(duì)象包含公開(kāi)的API return { increment: function() { privateCounter; privateLog(); return this; // 支持鏈?zhǔn)秸{(diào)用 }, getName: function() { return privateName; }, getCount: function() { return privateCounter; } }; })(); // 使用公開(kāi)的API MyModule.increment().increment(); console.log(MyModule.getCount()); // 2 console.log(MyModule.getName()); // Secret console.log(MyModule.privateCounter); // undefined技巧返回的對(duì)象中方法通過(guò)閉包Closure持續(xù)訪問(wèn)著IIFE作用域內(nèi)的私有變量privateCounter和privateName。這就是“模塊模式”的精髓。你可以通過(guò)返回不同的對(duì)象結(jié)構(gòu)實(shí)現(xiàn)單例、工廠等不同模式。3.2 場(chǎng)景二循環(huán)中的變量捕獲問(wèn)題這是一個(gè)經(jīng)典面試題也是IIFE解決實(shí)際問(wèn)題的典型案例。在沒(méi)有塊級(jí)作用域的時(shí)代循環(huán)中創(chuàng)建異步回調(diào)會(huì)出問(wèn)題。// 問(wèn)題代碼所有按鈕點(diǎn)擊都打印“Button 5 clicked” for (var i 0; i 5; i) { var btn document.createElement(button); btn.textContent Button i; btn.onclick function() { console.log(Button i clicked); }; document.body.appendChild(btn); } // 循環(huán)結(jié)束時(shí)i的值已經(jīng)是5。所有回調(diào)函數(shù)共享同一個(gè)i的引用。 // 解決方案使用IIFE為每次迭代創(chuàng)建獨(dú)立的作用域 for (var i 0; i 5; i) { (function(capturedI) { var btn document.createElement(button); btn.textContent Button capturedI; btn.onclick function() { console.log(Button capturedI clicked); }; document.body.appendChild(btn); })(i); // 將當(dāng)前的i值作為參數(shù)傳入 }原理在每次循環(huán)迭代時(shí)IIFE立即執(zhí)行并將當(dāng)前的i的值作為參數(shù)capturedI傳入。由于參數(shù)是基本類型數(shù)字它被按值傳遞每個(gè)IIFE都擁有自己的一份capturedI拷貝。這樣每個(gè)點(diǎn)擊回調(diào)函數(shù)閉包捕獲的就是各自IIFE作用域內(nèi)的capturedI從而得到正確的值?，F(xiàn)代解決方案在ES6之后我們只需將var改為let因?yàn)閘et擁有塊級(jí)作用域問(wèn)題自然解決。for循環(huán)頭部的let i會(huì)為每次迭代創(chuàng)建一個(gè)新的綁定效果與上述IIFE類似但語(yǔ)法簡(jiǎn)潔得多。這反過(guò)來(lái)說(shuō)明了IIFE在歷史上扮演的“模擬塊級(jí)作用域”的重要角色。3.3 場(chǎng)景三庫(kù)的封裝與全局對(duì)象注入編寫一個(gè)第三方庫(kù)時(shí)必須考慮不能污染全局命名空間同時(shí)也要妥善處理與其它庫(kù)的兼容性。// 我的庫(kù) myLib.js (function(global, factory) { // 判斷環(huán)境支持CommonJS、AMD和瀏覽器全局變量 if (typeof module object typeof module.exports object) { module.exports factory(); } else if (typeof define function define.amd) { define(factory); } else { global.MyAwesomeLib factory(); } })(typeof window ! undefined ? window : this, function() { // 庫(kù)的實(shí)際工廠函數(shù) var version 1.0.0; function privateHelper() { // 私有方法 } function publicApi() { console.log(MyAwesomeLib v version is ready!); } // 暴露公共API return { init: publicApi, // ... 其他方法 }; });設(shè)計(jì)解析外層IIFE接收global和factory兩個(gè)參數(shù)。global參數(shù)通過(guò)三元表達(dá)式判斷兼容瀏覽器環(huán)境window和Node.js等非瀏覽器環(huán)境this在全局作用域下指向全局對(duì)象。factory參數(shù)是真正定義庫(kù)的函數(shù)。UMD模式在IIFE內(nèi)部通過(guò)判斷module.exports和define是否存在來(lái)檢測(cè)當(dāng)前是CommonJS如Node.js、AMD如RequireJS還是普通瀏覽器環(huán)境從而將庫(kù)的導(dǎo)出適配到不同的模塊系統(tǒng)。這是一種通用的封裝模式Universal Module Definition。安全與兼容整個(gè)庫(kù)的代碼都在IIFE內(nèi)部不會(huì)意外聲明任何全局變量。通過(guò)參數(shù)傳入global既明確了依賴也方便代碼壓縮。3.4 場(chǎng)景四異步代碼的立即封裝在引入async/await之前處理異步流時(shí)為了立即執(zhí)行一個(gè)異步函數(shù)并避免Promise鏈的冗長(zhǎng)有時(shí)會(huì)用到IIFE。// 在頂層作用域無(wú)法直接使用await需要包裹 (async function() { try { const data await fetch(/api/data).then(r r.json()); const processed await processData(data); console.log(Result:, processed); } catch (error) { console.error(Failed:, error); } })(); // 使用箭頭函數(shù)形式同樣可以 (async () { // ... async operations })();說(shuō)明await關(guān)鍵字必須在async函數(shù)內(nèi)部使用。在腳本的頂層作用域非模塊內(nèi)如果我們想立即執(zhí)行一段異步邏輯就必須將其包裹在一個(gè)async函數(shù)中并立即調(diào)用。這就是一個(gè)異步IIFEAsync IIFE。它創(chuàng)建了一個(gè)獨(dú)立的異步執(zhí)行上下文。4. 常見(jiàn)陷阱、性能考量與現(xiàn)代替代方案即使掌握了寫法與應(yīng)用在實(shí)際使用中仍有一些細(xì)節(jié)需要注意。4.1 陷阱一嚴(yán)格模式的作用域如果你在IIFE內(nèi)使用嚴(yán)格模式use strict;它的影響僅限于該IIFE內(nèi)部。(function() { use strict; undeclaredVar 10; // 這里會(huì)拋出ReferenceError })(); undeclaredVar 20; // 這里不會(huì)報(bào)錯(cuò)假設(shè)在非嚴(yán)格模式的全局下這是一個(gè)優(yōu)點(diǎn)它允許你在自己的模塊中啟用嚴(yán)格的代碼檢查而不會(huì)影響其他可能未采用嚴(yán)格模式的第三方代碼。4.2 陷阱二IIFE的返回值與賦值IIFE可以返回值這個(gè)值可以賦給一個(gè)變量。這在模塊模式中已經(jīng)看到。const calculator (function() { let memory 0; return { add: x memory x, get: () memory }; })(); calculator.add(5); console.log(calculator.get()); // 5但要注意如果你不需要返回值就不要賦值。一個(gè)沒(méi)有返回值的IIFE其執(zhí)行結(jié)果默認(rèn)是undefined。將其賦值給變量通常沒(méi)有意義除非你特意想得到undefined。4.3 性能考量真的需要嗎在現(xiàn)代JavaScript引擎V8, SpiderMonkey等中創(chuàng)建一個(gè)函數(shù)作用域會(huì)有微小的開(kāi)銷。對(duì)于性能極度敏感的代碼段需要權(quán)衡。然而在絕大多數(shù)應(yīng)用中這種開(kāi)銷可以忽略不計(jì)。IIFE帶來(lái)的代碼組織、避免污染、邏輯清晰的好處遠(yuǎn)大于其微小的性能成本。更重要的是隨著ES6普及許多IIFE的使用場(chǎng)景有了更優(yōu)解塊級(jí)作用域用let和const代替var從根本上解決了循環(huán)變量捕獲等問(wèn)題無(wú)需IIFE。ES6模塊使用import和export語(yǔ)言層面提供了完美的模塊化方案無(wú)需再用IIFE模擬模塊。閉包創(chuàng)建有時(shí)只是為了創(chuàng)建一個(gè)閉包現(xiàn)在可以考慮使用更輕量的代碼塊{}配合let/const。4.4 代碼壓縮與IIFE代碼壓縮工具如UglifyJS、Terser非常擅長(zhǎng)處理IIFE。它們會(huì)進(jìn)行“函數(shù)內(nèi)聯(lián)”等優(yōu)化甚至可能將一些簡(jiǎn)單的IIFE直接展開(kāi)。你無(wú)需擔(dān)心IIFE會(huì)給最終打包體積帶來(lái)額外負(fù)擔(dān)。事實(shí)上通過(guò)IIFE將代碼模塊化反而有助于壓縮工具進(jìn)行更有效的死代碼消除。5. 總結(jié)與個(gè)人實(shí)踐建議回顧這五種寫法從經(jīng)典的括號(hào)包裹到利用運(yùn)算符再到new和箭頭函數(shù)它們共同的核心都是將函數(shù)定義轉(zhuǎn)化為可立即執(zhí)行的表達(dá)式。理解這個(gè)核心你就能看透所有變體的本質(zhì)。在我的日常開(kāi)發(fā)中選擇哪種寫法主要取決于上下文和團(tuán)隊(duì)約定對(duì)于新的個(gè)人項(xiàng)目或ES6環(huán)境我優(yōu)先使用箭頭函數(shù)形式的IIFE(() {})()因?yàn)樗詈?jiǎn)潔明了。如果函數(shù)體稍復(fù)雜或需要用到arguments則退回使用經(jīng)典括號(hào)包裹式。對(duì)于需要明確返回值或復(fù)雜模塊封裝的場(chǎng)景經(jīng)典括號(hào)包裹式(function(){})()或(function(){}())仍然是可靠的選擇結(jié)構(gòu)清晰傳參方便。在閱讀或維護(hù)老舊代碼庫(kù)時(shí)你會(huì)遇到所有這五種寫法甚至更多變體。理解它們的原理能幫助你快速上手。一個(gè)重要的習(xí)慣如果文件中的代碼不是從IIFE開(kāi)始那么在IIFE前加上一個(gè)分號(hào);這是一個(gè)防御性的好習(xí)慣可以避免因文件合并導(dǎo)致的語(yǔ)法錯(cuò)誤。最后雖然IIFE是JavaScript發(fā)展史上一個(gè)重要的模式但在今天我們有了更多強(qiáng)大的原生工具模塊、塊級(jí)作用域。我的建議是理解IIFE但不必濫用。在新項(xiàng)目中優(yōu)先使用ES6模塊來(lái)組織代碼用let/const來(lái)管理變量作用域。將IIFE視為一個(gè)仍然有用的工具用于那些特定的、模塊化不適用或需要兼容老舊環(huán)境的場(chǎng)景。它像是一把瑞士軍刀不一定每天用到但知道它每個(gè)部件的用法能在關(guān)鍵時(shí)刻優(yōu)雅地解決問(wèn)題。