介紹

IIFE(Immediately Invoked Function Expression)，中文名稱：立即執(zhí)行函數(shù)表達(dá)式，其實IIFE最早并不叫這個名字，而是叫做Self-Executing Anonymous Function，即自執(zhí)行匿名函數(shù)。根據(jù)MDN的資料，IIFE這個說法最早由Ben Alman于2010年提出，下面我們一起來看看這個名字的來龍去脈。

2010年11月5日，Ben Alman寫下來他的著名文章：Immediately-Invoked Function Expression (IIFE)，標(biāo)志著IIFE這個名字的誕生。

在文章中，Ben Alman稱他是一個對待術(shù)語非常嚴(yán)謹(jǐn)?shù)娜?，之前他多次看?code>Self-Executing Anonymous Function這個說法，覺得不是很恰當(dāng)，于是他提出了Immediately-Invoked Function Expression這個說法。

IIFE到底是咋來的？

當(dāng)我們定義一個函數(shù)或者一個函數(shù)表達(dá)式時，你得到的是一個名字，通過這個名字，你就可以調(diào)用這個函數(shù)。

下面這兩段代碼，第一個定義了一個普通函數(shù)，第二個定義了一個函數(shù)表達(dá)式，這兩種形式，我們都可以通過標(biāo)識符foo來調(diào)用它們。

// 普通函數(shù)
function foo() {
  console.log('I am a function');
}
// 函數(shù)表達(dá)式
const foo = function() {
  console.log('I am a function expression');
};

也就是說，當(dāng)javascript解釋器遇到全局function關(guān)鍵字，或者一個函數(shù)內(nèi)部的function關(guān)鍵字時，會將其解釋為一個函數(shù)聲明。

然而函數(shù)聲明是無法直接調(diào)用的，所以下面的寫法會導(dǎo)致錯誤：

function foo() {
  console.log('I am a function'); // Uncaught SyntaxError: Unexpected token ')'
}();

我們來分析一下，上面這段代碼，javascript解釋器會將其解釋為一個函數(shù)聲明，和一個分組操作符(()), 分組操作符是用來改變運(yùn)算符優(yōu)先級的，里面必須有表達(dá)式才行，所以javascript解釋器會報錯。

那我們就給它一個表達(dá)式：

function foo() {
  console.log('I am a function'); // Uncaught SyntaxError: Unexpected token ')'
}(1);

這回代碼不報錯了，但是這段代碼毫無意義，這個函數(shù)并沒有執(zhí)行，實際上這段代碼與下面的代碼等價：

function foo() {
  console.log('I am a function');
}
(1);

它的返回值就是1，這不是我們想要的結(jié)果，我們需要函數(shù)定義后能立即被執(zhí)行，那就需要我們告訴javascript解釋器，這個函數(shù)是一個表達(dá)式，而不是一個聲明，因為表達(dá)式可以立即執(zhí)行，但是聲明不能。

而在javascript中，生成表達(dá)式最簡單的方式就是用()包裹起來，于是有了下面的代碼

(function foo() {
  console.log('I am a function');
});

這樣函數(shù)聲明就變成了一個函數(shù)表達(dá)式，但是這個表達(dá)式?jīng)]有名字，我們沒法調(diào)用它，我們先給它一個名字，然后通過名字調(diào)用它。

const bar = (function foo() {
  console.log('I am a function');
});
bar(); // I am a function

這樣完全沒有問題，但是這里的bar實在有點(diǎn)多余，實際上bar和

(function foo() {
  console.log('I am a function');
});

是等價的，既然bar()可以調(diào)用函數(shù)，那么我們直接在函數(shù)表達(dá)式末尾加上()，也可以調(diào)用這個函數(shù)，于是就有了下面的代碼，這就是IIFE的由來。

(function foo() {
  console.log('I am a function');
})();

將()寫在外層的括號內(nèi)也一樣，這種方式頗得javascript專家Douglas Crockford的青睞。我本人更喜歡第一種。

(function() {
  console.log('I am a function');
}());

IIFE的變種

由上面介紹可知，生成IIFE的精髓就是將函數(shù)聲明變成函數(shù)表達(dá)式，而在javascript中，生成表達(dá)式可不止使用()包裹起來這一種方式，還有很多其他的方式可以實現(xiàn)。于是IIFE也就是產(chǎn)生了諸多變種。

這個變種利用賦值運(yùn)算符=來實現(xiàn)，賦值運(yùn)算符是將右側(cè)表達(dá)式的值賦值給左側(cè)變量的，所以它右側(cè)的部分被解析成了函數(shù)表達(dá)式及其調(diào)用。

const i = function() {
  console.log('I am an IIFE');
}();

下面的表中使用邏輯運(yùn)算符來生成表達(dá)式。

true & (function() {
  console.log('I am an IIFE');
}());

還有下面這些，都是利用一元運(yùn)算符來生成函數(shù)表達(dá)式。

!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

最后來一個不為人知的，void運(yùn)算符會對其右側(cè)的表達(dá)是求值然后返回undefined。（void expression - 先對expression求值，然后返回undefined）。

void function() {
  console.log('I am an IIFE');
}();

還有使用new運(yùn)算符來生成IIFE，這種方式比較少見，因為它會創(chuàng)建一個新的對象。

new function() {
  console.log('I am an IIFE');
}();

這些方式都比較偏門了，不建議使用，只是用來幫助我們理解IIFE的。

為什么Self-Executing Anonymous Function這個名字不好？

Ben Alman認(rèn)為這個名字有兩個問題：

Self-Executing：這個名字暗示函數(shù)會調(diào)用自己，但是實際上函數(shù)是立即被執(zhí)行的，而不是調(diào)用它自身。
比如下面的幾段代碼都會調(diào)用自己，但是這并不是IIFE的語義。

// 遞歸調(diào)用自身
function foo() { foo(); 
// 使用arguments.callee調(diào)用自身
const foo = function() { arguments.callee(); };

Anonymous：這個名字暗示函數(shù)是匿名的，但實際上函數(shù)可以有名字，也可以沒有名字，比如下面的例子：

// 有名字的IIFE
(function foo() {
  console.log('I am an IIFE');
})();

參考

https://web.archive.org/web/20171201033208/http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife

大家有時間可以去拜讀Ben Alman的原文，大佬寫的東西就是不一樣，通俗易懂，是我輩楷模！

到此這篇關(guān)于javascript中IIFE（立即執(zhí)行函數(shù)表達(dá)式）到底是咋來的？的文章就介紹到這了,更多相關(guān)javascript中IIFE（立即執(zhí)行函數(shù)表達(dá)式）到底是咋來的？內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論