進(jìn)擊的 JavaScript（五）之立即執(zhí)行函數(shù)與閉包

vincent_xyb 發(fā)布于2019-08-22 18:44 / 1249人閱讀

摘要：匿名函數(shù)是不能多帶帶寫的，所以就提不上立即執(zhí)行了。六立即執(zhí)行函數(shù)在閉包中的應(yīng)用立即執(zhí)行函數(shù)能配合閉包保存狀態(tài)。來看下上節(jié)內(nèi)容中閉包的例子現(xiàn)在，我們來利用立即執(zhí)行函數(shù)來簡(jiǎn)化它第一個(gè)匿名函數(shù)執(zhí)行完畢后，返回了第二個(gè)匿名函數(shù)。

前面的閉包中，提到與閉包相似的立即執(zhí)行函數(shù)，感覺兩者還是比較容易弄混吧，嚴(yán)格來說（因?yàn)橄透叱虒?duì)閉包的定義不同），立即執(zhí)行函數(shù)并不屬于閉包，它不滿足閉包的三個(gè)條件。

一、圓括號(hào)運(yùn)算符

　　圓括號(hào)運(yùn)算符也叫分組運(yùn)算符，它有兩種用法：如果表達(dá)式放在圓括號(hào)中，作用是求值；如果跟在函數(shù)后面，作用是調(diào)用函數(shù)

　　把表達(dá)式放在圓括號(hào)之中，將返回表達(dá)式的值

console.log((1+2)); // 3

　　將函數(shù)放在圓括號(hào)中，會(huì)返回函數(shù)本身。如果圓括號(hào)緊跟在函數(shù)的后面，就表示調(diào)用函數(shù)，即對(duì)函數(shù)求值

console.log((function testa(){return 666;}));
// function testa(){return 666;}

console.log(function testa(){return 666;}());
// 666

注意:圓括號(hào)運(yùn)算符不能為空，否則會(huì)報(bào)錯(cuò)

();//SyntaxError: Unexpected token )

由于圓括號(hào)的作用是求值，如果將語句放在圓括號(hào)之中，就會(huì)報(bào)錯(cuò)，因?yàn)檎Z句沒有返回值

(var a = function(){return 666});
// SyntaxError: Unexpected token var

二、函數(shù)聲明

使用 function 關(guān)鍵字創(chuàng)建一個(gè)函數(shù)，并且后面帶有函數(shù)名，叫函數(shù)聲明。

function testa(){}

三、匿名函數(shù)

那么使用 function 關(guān)鍵字創(chuàng)建的函數(shù)不帶函數(shù)名呢？那就是匿名函數(shù)了。

function (){}

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

那么把匿名函數(shù)賦值給一個(gè)變量呢？那就是函數(shù)表達(dá)式了。

var testa = function (){}

其實(shí)呢，函數(shù)表達(dá)式的根本所在，就是阻止了js引擎把 用function創(chuàng)建的函數(shù) 當(dāng)作函數(shù)聲明來解析。下面再詳說。

五、立即執(zhí)行函數(shù)（IIFE）

那么立即執(zhí)行函數(shù)呢？

用function定義函數(shù)之后，立即調(diào)用該函數(shù)。這種函數(shù)就叫做立即執(zhí)行函數(shù)，全稱為立即調(diào)用的函數(shù)表達(dá)式IIFE(Imdiately Invoked Function Expression)

1、在本系列進(jìn)擊的 JavaScript（三）中到過，代碼執(zhí)行時(shí)，會(huì)先對(duì)函數(shù)聲明的函數(shù) 進(jìn)行解析（函數(shù)聲明提升），而函數(shù)表達(dá)式，當(dāng)逐行執(zhí)行到它時(shí)，才會(huì)解析。

2、正因?yàn)楹瘮?shù)聲明的提升，導(dǎo)致函數(shù)聲明不能立即執(zhí)行。因?yàn)?，函?shù)聲明時(shí)，js只會(huì)解析到大括號(hào)（｝）就結(jié)束了，如果后面有()，只是一個(gè)圓括號(hào)運(yùn)算符。

function testa(){
    console.log("testa")
}("666")

//"666"
//如果后面是一個(gè)空的圓括號(hào)，會(huì)報(bào)錯(cuò)，上面提到過。

所以，不知道，你有沒有發(fā)現(xiàn)，函數(shù)聲明的函數(shù)，后面可以不用分號(hào)（;）分隔，也可以正常執(zhí)行，而函數(shù)表達(dá)式的后面就必須加分號(hào)，不然會(huì)報(bào)錯(cuò)。你可以自己寫個(gè)小栗子驗(yàn)證下。

3、匿名函數(shù)是不能多帶帶寫的，所以就提不上立即執(zhí)行了。

function (){}
//Uncaught SyntaxError: Unexpected token (

多帶帶寫匿名函數(shù)，是會(huì)報(bào)錯(cuò)的，js引擎會(huì)把它當(dāng)作函數(shù)聲明來解析，而函數(shù)聲明就必須要有個(gè)函數(shù)名，所以會(huì)報(bào)錯(cuò)。
所以，你通?？吹绞褂媚涿瘮?shù)，都是當(dāng)作參數(shù)傳遞的，或者把匿名函數(shù)轉(zhuǎn)為函數(shù)表達(dá)式。

4、因此，只有函數(shù)表達(dá)式可以立即執(zhí)行

var testa = function (){
    console.log("testa")
}()
//"testa"

上面提到過，函數(shù)表達(dá)式，就是阻止了js引擎把 |用function創(chuàng)建的函數(shù)| 當(dāng)作函數(shù)聲明來解析。

注：javascript引擎規(guī)定，如果function關(guān)鍵字出現(xiàn)在行首，一律解釋成函數(shù)聲明語句。

所以，解決方法就是不要讓function出現(xiàn)在行首，讓引擎將其理解成一個(gè)表達(dá)式。

//常用的兩種,使用圓括號(hào)運(yùn)算符
(function(){console.log("666")})()
(function(){console.log("666")}())

//一元運(yùn)算符寫法
!function(){console.log("666")}()
+function(){console.log("666")}()
-function(){console.log("666")}()
~function(){console.log("666")}()

都是都可以把函數(shù)聲明轉(zhuǎn)為函數(shù)表達(dá)式，也就是阻止了把其當(dāng)作函數(shù)聲明解析。

六、立即執(zhí)行函數(shù)在閉包中的應(yīng)用

1、立即執(zhí)行函數(shù)能配合閉包保存狀態(tài)。

來看下上節(jié)內(nèi)容中閉包的例子：

function makeClosures(i){    
    var i = i;  
    return function(){
        console.log(i);     
    }
}

for (var i=1; i<=5; i++) {
    setTimeout(makeClosures(i),i*1000);  
}
//1
//2
//3
//4
//5

現(xiàn)在，我們來利用立即執(zhí)行函數(shù)來簡(jiǎn)化它：

for (var i=1; i<=5; i++) {
    setTimeout((function(i){
        return function(){
            console.log(i);
        }
    })(i),i*1000);
}

第一個(gè)匿名函數(shù)執(zhí)行完畢后，返回了第二個(gè)匿名函數(shù)。第二個(gè)匿名函數(shù)被當(dāng)做setTimeout 的第一個(gè)參數(shù)傳入進(jìn)去。因?yàn)?setTimeout函數(shù)執(zhí)行了5次，所以立即執(zhí)行函數(shù)里每次都會(huì)返回了一個(gè)沒有被執(zhí)行的匿名函數(shù)，（這里就是返回了5個(gè)匿名函數(shù)），每個(gè)匿名函數(shù)內(nèi)部保存著每次傳進(jìn)來的i值，因此，每個(gè)i 都是不一樣的，所以，就得到了想要的結(jié)果

2、立即執(zhí)行函數(shù)配合閉包模塊化中應(yīng)用

(function(){
    var meg = "hello zdx";
    
    function say(arg){
        arg = arg || meg;
        console.log(arg)
    }
    
    window.say = say;
})(window)

window.say();

//"hello zdx"

首先立即執(zhí)行函數(shù)，它是個(gè)匿名函數(shù)，你是得不到它的函數(shù)引用，這樣，就避免了全局變量污染。其次，由于函數(shù)作用域的規(guī)則，在匿名函數(shù)外部是訪問不了函數(shù)內(nèi)的變量，函數(shù)等的。所以，也經(jīng)常用立即執(zhí)行函數(shù)模擬塊級(jí)作用域。

GPU云服務(wù)器云服務(wù)器 javascript執(zhí)行函數(shù) 函數(shù)的執(zhí)行過程 PHP閉包函數(shù) 閉包函數(shù)python

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96145.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

vincent_xyb

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于STM32的OLED屏顯示AHT20采集的溫濕度數(shù)據(jù)

閱讀 1503·2021-11-22 09:34
17k Star！打造私人版的某度網(wǎng)盤，限速也不怕

閱讀 3320·2021-09-29 09:35
在工廠擰了兩年的螺絲，我靠“測(cè)試”月入過萬，逆襲了......

閱讀 562·2021-09-04 16:40
css實(shí)現(xiàn)“品”字形分級(jí)圖

閱讀 2912·2019-08-30 15:53
rem自適應(yīng)原理

閱讀 2582·2019-08-30 15:44
JavaScript 設(shè)置CSS與注意事項(xiàng)

閱讀 2584·2019-08-30 14:10
利用CSS變量實(shí)現(xiàn)炫酷的懸浮效果

閱讀 1328·2019-08-29 18:43
「大集錦」WEB前端開發(fā) 辨析類面試真題

閱讀 2205·2019-08-29 13:26

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

進(jìn)擊的 JavaScript（五）之立即執(zhí)行函數(shù)與閉包

相關(guān)文章

進(jìn)擊的 JavaScript（四）之閉包

進(jìn)擊JavaScript之（三）玩轉(zhuǎn)閉包

**前端進(jìn)擊的巨人（五）：學(xué)會(huì)函數(shù)柯里化（curry)**

**前端進(jìn)擊的巨人（三）：從作用域走進(jìn)閉包**

進(jìn)擊JavaScript之（一）變量聲明提升

發(fā)表評(píng)論

0條評(píng)論

vincent_xyb

男|高級(jí)講師

TA的文章

基于STM32的OLED屏顯示AHT20采集的溫濕度數(shù)據(jù)

17k Star！打造私人版的某度網(wǎng)盤，限速也不怕

在工廠擰了兩年的螺絲，我靠“測(cè)試”月入過萬，逆襲了......

css實(shí)現(xiàn)“品”字形分級(jí)圖

rem自適應(yīng)原理

JavaScript 設(shè)置CSS與注意事項(xiàng)

利用CSS變量實(shí)現(xiàn)炫酷的懸浮效果

「大集錦」WEB前端開發(fā) 辨析類面試真題

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

進(jìn)擊的 JavaScript（五） 之 立即執(zhí)行函數(shù)與閉包

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

進(jìn)擊的 JavaScript（五）之立即執(zhí)行函數(shù)與閉包