快捷導(dǎo)航

javascript中IIFE立即執(zhí)行函數(shù)表達(dá)式來(lái)龍去脈解析

更新時(shí)間：2025年07月01日 08:59:46 作者：前端風(fēng)云志

Ben?Alman于2010年提出IIFE立即執(zhí)行函數(shù)表達(dá)式,取代舊稱Self-ExecutingAnonymousFunction,通過(guò)括號(hào)包裹函數(shù)聲明轉(zhuǎn)為表達(dá)式,實(shí)現(xiàn)立即執(zhí)行,常見形式為()包裹,其他變種如new、void等不推薦使用,感興趣的朋友一起看看吧

介紹

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

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

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

IIFE到底是咋來(lái)的？

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

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

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

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

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

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

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

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

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

這回代碼不報(bào)錯(cuò)了，但是這段代碼毫無(wú)意義，這個(gè)函數(shù)并沒(méi)有執(zhí)行，實(shí)際上這段代碼與下面的代碼等價(jià)：

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

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

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

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

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

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

這樣完全沒(méi)有問(wèn)題，但是這里的bar實(shí)在有點(diǎn)多余，實(shí)際上bar和

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

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

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

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

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

IIFE的變種

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

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

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

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

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

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

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

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

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

還有使用new運(yùn)算符來(lái)生成IIFE，這種方式比較少見，因?yàn)樗鼤?huì)創(chuàng)建一個(gè)新的對(duì)象。

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

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

為什么Self-Executing Anonymous Function這個(gè)名字不好？

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

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

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

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

// 有名字的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

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

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

您可能感興趣的文章: