Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
前言
IIFE,一般稱為立即執(zhí)行函數(shù)。你可能會(huì)問(wèn)我,*“嘿!我知道正常的函數(shù)表達(dá)式是什么樣子的,但是 IIFE 到底是什么?”。*好吧,這正是我今天要在本文中回答的問(wèn)題。
函數(shù)表達(dá)式
在了解立即調(diào)用函數(shù)表達(dá)式之前,讓我們快速回顧一下 JavaScript 中的普通函數(shù)表達(dá)式是什么樣的。
function(){ return ; }
這就是我們通常在 JavaScript 中編寫函數(shù)的方式。function關(guān)鍵字,然后是函數(shù)名稱,然后是函數(shù)體。
在ES6之后,我們還可以編寫箭頭函數(shù),以及將箭頭函數(shù)賦值給變量。
ArrowFn(()=>{ })
let ArrowFn=()=>{ }
通過(guò)上面的小例子,快速回顧了普通函數(shù)以及箭頭函數(shù)的編寫方式。下面我們介紹立即執(zhí)行函數(shù)
重要的部分來(lái)了,為了調(diào)用上面的方法我們會(huì)怎么調(diào)用?你需要在任何你想要的地方顯式地調(diào)用它。事實(shí)上,這就是我們首先編寫普通函數(shù)表達(dá)式的主要原因。
ArrowFn()
立即執(zhí)行函數(shù)
現(xiàn)在,我們了解了普通函數(shù)表達(dá)式在 JavaScript 中是如何工作的,讓我們慢慢轉(zhuǎn)向 IIFE。讓我們嘗試?yán)斫舛陶Z(yǔ)Immediately Invoked Functional Expressions。它的意思是:
立即調(diào)用:立即調(diào)用的東西。
函數(shù)表達(dá)式:到目前為止,我們已經(jīng)研究過(guò)它們!
如果我們了解整個(gè)情況:
IIFE(立即調(diào)用函數(shù)表達(dá)式)是一個(gè) JavaScript 函數(shù),它在定義后立即運(yùn)行。-MDN
所以,我們不需要顯式調(diào)用這個(gè)函數(shù)來(lái)調(diào)用/運(yùn)行它。它會(huì)在調(diào)用 JavaScript 文件后立即運(yùn)行。IIFE 看起來(lái)像這樣:
(function(){ 這里是函數(shù)體 })()
如果我們看語(yǔ)法本身,我們有兩對(duì)閉括號(hào),第一對(duì)包含要執(zhí)行的邏輯,第二個(gè)通常是我們調(diào)用函數(shù)時(shí)包含的內(nèi)容,第二個(gè)括號(hào)負(fù)責(zé)告訴編譯器函數(shù)表達(dá)式必須立即執(zhí)行。
以下是將普通函數(shù)轉(zhuǎn)換為 IIFE 的方法
function consoleName(){ console.log('hello 哈哈哈') } consoleName() (function(){console.log('hello 哈哈哈')})()
請(qǐng)注意,我們不需要對(duì) IIFE 的顯式調(diào)用。此外,這些只是匿名函數(shù),因?yàn)樗鼈儾恍枰瘮?shù)名。如果你愿意,你也可以給它命名。它們甚至也可以是箭頭函數(shù)!
當(dāng)然了,立即執(zhí)行也接受參數(shù),下面是一個(gè)小栗子:
function consoleName(name){ console.log('hello '+ name) } consoleName('哈哈哈') (function(name){console.log('hello '+name)})("哈哈哈")
IIFE 的特征/行為
IIFE 像 JavaScript 中的任何其他函數(shù)/變量一樣遵循自己的范圍。立即調(diào)用的名稱部分有時(shí)會(huì)使新開(kāi)發(fā)人員感到困惑,因?yàn)樗麄兿M?IIFE 執(zhí)行而與函數(shù)范圍無(wú)關(guān),這是錯(cuò)誤的。例如,讓我們看下面的示例,其中 IIFE 是在函數(shù)中定義的,并且只有在我們調(diào)用父函數(shù)時(shí)才會(huì)立即調(diào)用。
function fn(){ console.log("A"); (()=>{ console.log("B") })() console.log("C") }
輸出結(jié)果是A B C
與其他函數(shù)類似,IIFE 也可以命名或匿名,但即使 IIFE 確實(shí)有名稱,也不可能引用/調(diào)用它。
IIFE 有自己的范圍,即您在函數(shù)表達(dá)式中聲明的變量在函數(shù)之外將不可用。
附:IIFE的參數(shù)
在前面提了一下IIFE的參數(shù)傳遞,直接上代碼:
var mymodule= {}; (function(window, MyModule, undefined){ //代碼 })(window, mymodule);
參數(shù)分為形參和實(shí)參。function(window, MyModule, undefined)三個(gè)參數(shù)為形參,第二個(gè)括號(hào)(window, mymodule)的兩個(gè)參數(shù)為實(shí)參。也即可以理解為 window == window,MyModule== mymodule。
普通形參
普通形參是指由window和wall這樣的實(shí)際變量傳入指定,可以為任何類型的變量。一個(gè)形參就對(duì)應(yīng)一個(gè)實(shí)參
特殊形參undefined
大家都知道,IE是個(gè)神奇的瀏覽器,尤其是早期版本。比如說(shuō)IE6這玩意兒,它居然功能強(qiáng)大到可以修改undefined,如果undefined被修改以,那么下面這類代碼就玩不轉(zhuǎn)了:
if(mymodule == undefined){ //永遠(yuǎn)也進(jìn)不來(lái)了 }
所以這個(gè)地方多加一個(gè)形參,就可以避免這個(gè)坑,在IIFE作用域中就能正常的獲取到undefined了。
同時(shí),它也有助于代碼的壓縮,減小文件的大小。
總結(jié)
到此這篇關(guān)于Javascript立即執(zhí)行函數(shù)的文章就介紹到這了,更多相關(guān)JS立即執(zhí)行函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 深入理解javascript中的立即執(zhí)行函數(shù)(function(){…})()
- js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
- JavaScript中立即執(zhí)行函數(shù)實(shí)例詳解
- 深入解析JavaScript中的立即執(zhí)行函數(shù)
- JavaScript立即執(zhí)行函數(shù)的三種不同寫法
- 詳解JS中的立即執(zhí)行函數(shù)
- JS立即執(zhí)行函數(shù)功能與用法分析
- 詳解javascript立即執(zhí)行函數(shù)表達(dá)式IIFE
- 深入淺析javascript立即執(zhí)行函數(shù)
- JavaScript中的立即執(zhí)行函數(shù)表達(dá)式介紹
相關(guān)文章
簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換
這篇文章主要介紹了簡(jiǎn)單介紹JavaScript數(shù)據(jù)類型之隱式類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2015-12-12普通web整合quartz跑定時(shí)任務(wù)的示例
這篇文章主要介紹了普通web整合quartz跑定時(shí)任務(wù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-01-01微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序頁(yè)面縮放式側(cè)滑效果的實(shí)現(xiàn)代碼,實(shí)現(xiàn)原理就是通過(guò)點(diǎn)擊按鈕,往需要?jiǎng)赢?huà)的div中添加或移除擁有動(dòng)畫(huà)效果的class。具體實(shí)例代碼大家跟隨小編一起通過(guò)本文學(xué)習(xí)吧2018-11-11javascript正則表達(dá)式模糊匹配IP地址功能示例
這篇文章主要介紹了javascript正則表達(dá)式模糊匹配IP地址功能,結(jié)合簡(jiǎn)單實(shí)例形式演示了JS模糊匹配IP地址的實(shí)現(xiàn)方法,涉及針對(duì)數(shù)字及字符串的相關(guān)正則判定與匹配操作技巧,需要的朋友可以參考下2017-01-01微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案,需要的朋友可以參考下2018-09-09JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法,有需要的朋友可以參考一下2013-12-12js 動(dòng)態(tài)加載事件的幾種方法總結(jié)
本篇文章主要是對(duì)js 動(dòng)態(tài)加載事件的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12