前言

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

函數(shù)表達式

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

function(){
 return ;
}

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

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

ArrowFn(()=>{
})

let ArrowFn=()=>{
}

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

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

ArrowFn()

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

現(xiàn)在，我們了解了普通函數(shù)表達式在 JavaScript 中是如何工作的，讓我們慢慢轉向 IIFE。讓我們嘗試理解短語Immediately Invoked Functional Expressions。它的意思是：

立即調用：立即調用的東西。

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

如果我們了解整個情況：

IIFE（立即調用函數(shù)表達式）是一個 JavaScript 函數(shù)，它在定義后立即運行。-MDN

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

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

如果我們看語法本身，我們有兩對閉括號，第一對包含要執(zhí)行的邏輯，第二個通常是我們調用函數(shù)時包含的內容，第二個括號負責告訴編譯器函數(shù)表達式必須立即執(zhí)行。

以下是將普通函數(shù)轉換為 IIFE 的方法

function consoleName(){
	console.log('hello 哈哈哈')
}
consoleName()

(function(){console.log('hello 哈哈哈')})()

請注意，我們不需要對 IIFE 的顯式調用。此外，這些只是匿名函數(shù)，因為它們不需要函數(shù)名。如果你愿意，你也可以給它命名。它們甚至也可以是箭頭函數(shù)！

當然了，立即執(zhí)行也接受參數(shù)，下面是一個小栗子：

function consoleName(name){
	console.log('hello '+ name)
}
consoleName('哈哈哈')

(function(name){console.log('hello '+name)})("哈哈哈")

IIFE 的特征/行為

• IIFE 像 JavaScript 中的任何其他函數(shù)/變量一樣遵循自己的范圍。立即調用的名稱部分有時會使新開發(fā)人員感到困惑，因為他們希望 IIFE 執(zhí)行而與函數(shù)范圍無關，這是錯誤的。例如，讓我們看下面的示例，其中 IIFE 是在函數(shù)中定義的，并且只有在我們調用父函數(shù)時才會立即調用。

  function fn(){
  	console.log("A");
  	(()=>{
  		console.log("B")
  	})()
  	console.log("C")
  }

  輸出結果是A B C

• 與其他函數(shù)類似，IIFE 也可以命名或匿名，但即使 IIFE 確實有名稱，也不可能引用/調用它。

• IIFE 有自己的范圍，即您在函數(shù)表達式中聲明的變量在函數(shù)之外將不可用。

附：IIFE的參數(shù)

在前面提了一下IIFE的參數(shù)傳遞，直接上代碼：

var mymodule= {};
(function(window, MyModule, undefined){
    //代碼
})(window, mymodule);

參數(shù)分為形參和實參。function(window, MyModule, undefined)三個參數(shù)為形參，第二個括號(window, mymodule)的兩個參數(shù)為實參。也即可以理解為 window == window，MyModule== mymodule。

普通形參

普通形參是指由window和wall這樣的實際變量傳入指定，可以為任何類型的變量。一個形參就對應一個實參

特殊形參undefined

大家都知道，IE是個神奇的瀏覽器，尤其是早期版本。比如說IE6這玩意兒，它居然功能強大到可以修改undefined，如果undefined被修改以，那么下面這類代碼就玩不轉了：

if(mymodule == undefined){
 //永遠也進不來了
}

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

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

總結

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

最新評論