您好,登錄后才能下訂單哦!
這篇文章主要介紹JavaScript中立即執(zhí)行函數(shù)格式有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
在JavaScript中有時(shí)候看到一些很神奇的函數(shù)比如下面截圖:
這種函數(shù)只要瀏覽器加載的時(shí)候會(huì)自動(dòng)運(yùn)行,而需要調(diào)用,前面在閉包的時(shí)候也說過這種函數(shù),一般將其稱之為:立即執(zhí)行函數(shù)。
立即函數(shù)的特征:
會(huì)自動(dòng)執(zhí)行
只會(huì)執(zhí)行一次
立即執(zhí)行函數(shù)一般有格式如下:
# 格式一(//W3C 推薦這種寫法) (function (){ }()) #格式二 (但是這個(gè)才是最常用的方式之一) (function (){ })();
其實(shí)上面還可以看出立即執(zhí)行函數(shù),一般都不會(huì)寫函數(shù)名字,其意義不大,畢竟立即函數(shù)不必通過函數(shù)名進(jìn)行調(diào)用了,這個(gè)和字面量定義函數(shù)的時(shí)候作用差不多。
現(xiàn)在結(jié)合閉包和立即執(zhí)行函數(shù)相互結(jié)合來一個(gè)例子:
var fun=( function(){ function test(a,b){ console.log(a+b); } return test; } )()
上面的立即執(zhí)行函數(shù)的格式定義,但是還有其他方式實(shí)現(xiàn)這個(gè)功能,比如下面這個(gè)就不是上面的格式
!function(){ console.log("test"); }()
看出其輸出的兩行,第一個(gè)是test,也就是有種立即執(zhí)行函數(shù)的結(jié)果,而true被輸出是是因?yàn)榍懊娑嗔?!,這個(gè)在隱式轉(zhuǎn)換的時(shí)候說過,在!后面的都會(huì)強(qiáng)制換行布爾類型。
現(xiàn)在又有一個(gè)疑問了,為什么這種方式可以實(shí)現(xiàn)呢?
分析這種情況的產(chǎn)生,首先來一個(gè)表達(dá)式函數(shù):
var test=function(){ console.log("test表達(dá)式") } #這樣聲明后,如何使用呢?如下 test();
這個(gè)時(shí)候就有一個(gè)大膽的想法了,賦值的函數(shù),通過變量值+()就可以執(zhí)行,那為什么不能直接寫好。
var test=function(){ console.log("test表達(dá)式") }()
這地方可以看出 表達(dá)式函數(shù)也有了一種立即執(zhí)行的效果。
(補(bǔ)充:為什么都有undefined,因?yàn)檫@個(gè)函數(shù)本身就沒有return 值,所以會(huì)有undefined這個(gè)值在瀏覽器console面板輸出了undefined)
那直接在函數(shù)后面放括號(hào)可以嗎?
function(){ console.log("test表達(dá)式") }()
可以看出需要用表達(dá)式前提才可以在后面放(),不然會(huì)報(bào)錯(cuò)。
這個(gè)時(shí)候就有了一個(gè)大膽的想法,其實(shí)!后面方法,其實(shí)將函數(shù)轉(zhuǎn)換成立表達(dá)式函數(shù),所以后面可以+()可以直接運(yùn)行了。那就有了大膽的想法,既然如此那直接在函數(shù)前加一個(gè)加號(hào)(+)試試。
+function(){ console.log("test表達(dá)式") }()
既然加號(hào)可以那么:
+ | - |
---|---|
! | ~ |
當(dāng)然所謂的乘號(hào)和除號(hào)是無法實(shí)現(xiàn)的,還有一個(gè)神奇的關(guān)鍵字也可以有這個(gè)神奇的效果,那就是new 和 void
new function(){ console.log("test表達(dá)式") }()
還有一個(gè)那就是量邏輯運(yùn)算符號(hào) || 和&& 也可以實(shí)現(xiàn)
不過這個(gè)需要根據(jù)其特征再前面需要加真或者假才可以,單獨(dú)使用是不可以的
1 && function(){ console.log("test表達(dá)式") }() 或者 0 || function(){ console.log("test表達(dá)式") }()
還有一個(gè)神奇的符號(hào)(逗號(hào))也可以實(shí)現(xiàn)這個(gè)功能:
1,function(){ console.log("test表達(dá)式") }()
可以看出如果使用逗號(hào),無論前面真假都會(huì)執(zhí)行后面的表達(dá)式函數(shù)。
立即執(zhí)行函數(shù)也可以有參數(shù)的,具體如下
(function(a,b){ console.log(a,b) })(1,2)
這個(gè)題是很經(jīng)典的面試題,首先創(chuàng)建下一個(gè)html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <ul id=”test”> <li>這是第一條</li> <li>這是第二條</li> <li>這是第三條</li> </ul> <script> var liList=document.getElementsByTagName('li'); for(var i=0;i<liList.length;i++) { liList[i].onclick=function(){ console.log(i); } }; </script> </body> </html>
目的是點(diǎn)擊第幾個(gè)標(biāo)簽li 輸出幾,但是結(jié)果
因?yàn)樵邳c(diǎn)擊li的時(shí)候for循環(huán)早已循環(huán)完畢了,這個(gè)可以用前面所學(xué)的let,關(guān)鍵字也可以解決
var liList=document.getElementsByTagName('li'); for(let i=0;i<liList.length;i++) { liList[i].οnclick=function(){ console.log(i); } };
這個(gè)可以解決這個(gè)問題,但是沒有用到立即運(yùn)行函數(shù),當(dāng)然也可以通過立即執(zhí)行函數(shù)進(jìn)行修改
var liList=document.getElementsByTagName('li'); for(let i=0;i<liList.length;i++) { (function(a){ liList[a].οnclick=function(){ console.log(a); } })(i) };
可以看出立即執(zhí)行函數(shù)會(huì)形成一個(gè)自己的封閉空間,其不會(huì)被外部的其他變量影響,其實(shí)這個(gè)如果再有一個(gè)return的話就是一個(gè)標(biāo)準(zhǔn)的閉包了。
以上是“JavaScript中立即執(zhí)行函數(shù)格式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。