前言

IIFE,一般稱為立即執(zhí)行函數(shù)。你可能會(huì)問我，*“嘿！我知道正常的函數(shù)表達(dá)式是什么樣子的，但是 IIFE 到底是什么？”。*好吧，這正是我今天要在本文中回答的問題。

函數(shù)表達(dá)式

在了解立即調(diào)用函數(shù)表達(dá)式之前，讓我們快速回顧一下 JavaScript 中的普通函數(shù)表達(dá)式是什么樣的。

function(){
 return ;
}

這就是我們通常在 JavaScript 中編寫函數(shù)的方式。function關(guān)鍵字，然后是函數(shù)名稱，然后是函數(shù)體。

在ES6之后，我們還可以編寫箭頭函數(shù)，以及將箭頭函數(shù)賦值給變量。

ArrowFn(()=>{
})

let ArrowFn=()=>{
}

通過上面的小例子，快速回顧了普通函數(shù)以及箭頭函數(shù)的編寫方式。下面我們介紹立即執(zhí)行函數(shù)

重要的部分來了，為了調(diào)用上面的方法我們會(huì)怎么調(diào)用？你需要在任何你想要的地方顯式地調(diào)用它。事實(shí)上，這就是我們首先編寫普通函數(shù)表達(dá)式的主要原因。

ArrowFn()

立即執(zhí)行函數(shù)

現(xiàn)在，我們了解了普通函數(shù)表達(dá)式在 JavaScript 中是如何工作的，讓我們慢慢轉(zhuǎn)向 IIFE。讓我們嘗試?yán)斫舛陶ZImmediately Invoked Functional Expressions。它的意思是：

立即調(diào)用：立即調(diào)用的東西。

函數(shù)表達(dá)式：到目前為止，我們已經(jīng)研究過它們！

如果我們了解整個(gè)情況：

IIFE（立即調(diào)用函數(shù)表達(dá)式）是一個(gè) JavaScript 函數(shù)，它在定義后立即運(yùn)行。-MDN

所以，我們不需要顯式調(diào)用這個(gè)函數(shù)來調(diào)用/運(yùn)行它。它會(huì)在調(diào)用 JavaScript 文件后立即運(yùn)行。IIFE 看起來像這樣：

(function(){
 這里是函數(shù)體
})()

如果我們看語法本身，我們有兩對(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ì)使新開發(fā)人員感到困惑，因?yàn)樗麄兿Ｍ?IIFE 執(zhí)行而與函數(shù)范圍無關(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è)神奇的瀏覽器，尤其是早期版本。比如說IE6這玩意兒，它居然功能強(qiáng)大到可以修改undefined，如果undefined被修改以，那么下面這類代碼就玩不轉(zhuǎn)了：

if(mymodule == undefined){
 //永遠(yuǎn)也進(jìn)不來了
}

所以這個(gè)地方多加一個(gè)形參，就可以避免這個(gè)坑，在IIFE作用域中就能正常的獲取到undefined了。

同時(shí)，它也有助于代碼的壓縮，減小文件的大小。

總結(jié)

到此這篇關(guān)于Javascript立即執(zhí)行函數(shù)的文章就介紹到這了,更多相關(guān)JS立即執(zhí)行函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！