亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解

 更新時(shí)間:2022年04月12日 08:43:50   作者:半夏的故事  
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論