JS匿名自執(zhí)行函數(shù)(IIFE)

????JS自執(zhí)行函數(shù)又稱為IIFE魏烫,在我們開發(fā)過程中會(huì)使用到大量的自執(zhí)行函數(shù)骡尽。

IIFE寫法:

????使用建議:在使用只執(zhí)行函數(shù)前面加上 “ ; ”患亿,避免壓縮或者打包時(shí)變?yōu)楹瘮?shù)慌核。

? ? 首先我們要了解一般情況下什么是函數(shù)聲明語句商乎,什么是函數(shù)表達(dá)式語句央拖,以便于接下來的實(shí)驗(yàn)。

????辨別方法:以“function”開頭的有名稱的函數(shù)是函數(shù)聲明語句鹉戚。

function a();//函數(shù)聲明語句

var a = function();//函數(shù)表達(dá)式語句

? ? 下面我們?cè)诜治鲆坏烂嬖囶}:

var a = function(){}

var b = function(){}

console.log(a()+b());//輸出結(jié)果是NaN

因?yàn)榻忉屍鲿?huì)把前面的a()認(rèn)為是一個(gè)語句塊的結(jié)束鲜戒,后面的‘+’一元運(yùn)算符有把后面b()轉(zhuǎn)換為數(shù)字這么一個(gè)功能,所以得到的結(jié)果是NaN抹凳。

因此我們?cè)谧鲎詧?zhí)行函數(shù)的時(shí)候遏餐,要把函數(shù)的聲明變?yōu)楹瘮?shù)表達(dá)式,這樣就不會(huì)影響輸出的結(jié)果了赢底。

方法1:

(function(){

})();

方法2:

(function(){

}() );

方法3(通過操作符):但是這種方法仍然會(huì)占用命名空間失都,所以不建議使用。

var a = function (){

console.log(2)

}()

方法4(通過操作符)與或操作符:

false || function (){

console.log(2)

}()

true && function (){

console.log(2)

}()

0 , function (){

console.log(2)

}()

注:通過操作符實(shí)現(xiàn)自執(zhí)行函數(shù)一般使用在打包工具里面颖系,比如webpack打包后會(huì)經(jīng)承崞剩看到 ” 0,functtion(){}()“

方法5:(一元運(yùn)算符)一元運(yùn)算符仍然可以將函數(shù)聲明轉(zhuǎn)換為函數(shù)表達(dá)式,在bootstrap框架中常用嘁扼。

! function (){

console.log(2)

}()

-function (){

console.log(2)

}()

+function (){

console.log(2)

}()

方法6:new一個(gè)匿名函數(shù)信粮,后面可省略括號(hào)。(不建議使用趁啸,會(huì)產(chǎn)生爭議)

new function (){

console.log(2)

};//在不傳參的情況下使用new也可以自執(zhí)行强缘,可以去掉小括號(hào),不常用不傅。


以上方法性能比較:

除了一元運(yùn)算符的時(shí)候性能偏低旅掂,因?yàn)橐M(jìn)行一次數(shù)字類型的轉(zhuǎn)換,其他的都可以访娶。


應(yīng)用:

我們要了解商虐,為什么使用自執(zhí)行函數(shù),確切的說是自執(zhí)行函數(shù)的優(yōu)點(diǎn)以及缺點(diǎn):

? ? ? ? 1.避免作用域命名污染

? ? ? ? 2.提升性能(減少了對(duì)作用域的查找)

? ? ? ? 3.避免全局命名沖突

????????????????比如jq里面暴露給全局作用域$和query兩個(gè)變量,為了解決這個(gè)問題秘车,我們可以將window.jq作為一個(gè)實(shí)參傳遞給一個(gè)立即執(zhí)行的匿名函數(shù)典勇。這樣的話,我們?cè)俅蚊?或者query就不會(huì)有沖突了叮趴。

? ? ? ? 4.有利于代碼壓縮(可以用簡單字符串代替)

? ? ? ? 5.保存閉包狀態(tài)

? ? ? ? 6.顛倒代碼執(zhí)行順序

(function(){})(bb())

console.log(12)

function bb(){

????????console.log(22)

}割笙;//打印順序是22,12

這就叫做UMD通用模塊規(guī)范眯亦,在實(shí)際開發(fā)過程中被廣泛應(yīng)用伤溉。

? ? ? ? 7.模仿塊級(jí)作用域

????作用域的內(nèi)部可以訪問到外部,外部不可以訪問到內(nèi)部妻率,js作用域的缺陷就是沒有塊級(jí)作用域乱顾。

? ? 比如:

????????????for (var i = 0; i <6; i++) {

????????????}

????????????console.log(i);//打印出來的是6,在for循環(huán)外面仍然可以訪問到變量i宫静。

三個(gè)特殊的語句可以欺騙語法分析:


? ??????evel(); //內(nèi)部存放js代碼可被執(zhí)行

? ??????with(object?instance)?? {?? ????????//代碼塊?? }? 糯耍; // with?語句可以方便地用來引用某個(gè)特定對(duì)象中已有的屬性,但是不能用來給對(duì)象添加屬性囊嘉。要給對(duì)象創(chuàng)建新的屬性,必須明確地引用該對(duì)象革为。

? ??????try {   // 此處是可能產(chǎn)生例外的語句   } catch(error) {  // 此處是負(fù)責(zé)例外處理的語句   } finally {   // 此處是出口語句   }


所以在ES3下扭粱,嚴(yán)格來說js是沒有塊級(jí)作用域的,但是以上三種方法可以實(shí)現(xiàn)塊級(jí)作用域的效果震檩。

常用的有try catch琢蛤,把要聲明的變量放在try里面,然后當(dāng)一個(gè)錯(cuò)誤拋出抛虏,讓cath接住使用博其。缺點(diǎn):1.多個(gè)塊級(jí)作用域需要多個(gè)嵌套;2.性能問題迂猴。

匿名自執(zhí)行函數(shù)只能模擬塊級(jí)作用域慕淡,并非真正的作用域。

? ?let定義的作用域是塊級(jí)作用域沸毁,但不要輕易使用峰髓,針對(duì)開發(fā)場景來選擇。

? ? ? ? 8.填坑(加載第三方插件時(shí)候的一些問題)

????????????????比如有個(gè)人寫了這樣一段代碼:undefined=true息尺,再早之前undefined是可以被賦值的携兵,所以這段代碼不會(huì)報(bào)錯(cuò),但是這樣會(huì)致使你下面的一些判斷出錯(cuò)

????????????????這時(shí)候如果使用匿名自執(zhí)行函數(shù)就可以解決:

(function(undefined){

????????console.log(undefined)

}())

了解他的優(yōu)點(diǎn)之后我們才可以在正確的場景使用IIFE搂誉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末徐紧,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌并级,老刑警劉巖拂檩,帶你破解...
    沈念sama閱讀 219,039評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異死遭,居然都是意外死亡广恢,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門呀潭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钉迷,“玉大人,你說我怎么就攤上這事钠署】反希” “怎么了?”我有些...
    開封第一講書人閱讀 165,417評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵谐鼎,是天一觀的道長舰蟆。 經(jīng)常有香客問我,道長狸棍,這世上最難降的妖魔是什么身害? 我笑而不...
    開封第一講書人閱讀 58,868評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮草戈,結(jié)果婚禮上塌鸯,老公的妹妹穿的比我還像新娘。我一直安慰自己唐片,他們只是感情好丙猬,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,892評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著费韭,像睡著了一般茧球。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上星持,一...
    開封第一講書人閱讀 51,692評(píng)論 1 305
  • 那天抢埋,我揣著相機(jī)與錄音,去河邊找鬼督暂。 笑死羹令,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的损痰。 我是一名探鬼主播福侈,決...
    沈念sama閱讀 40,416評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼卢未!你這毒婦竟也來了肪凛?” 一聲冷哼從身側(cè)響起堰汉,我...
    開封第一講書人閱讀 39,326評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎伟墙,沒想到半個(gè)月后翘鸭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡戳葵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,957評(píng)論 3 337
  • 正文 我和宋清朗相戀三年就乓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拱烁。...
    茶點(diǎn)故事閱讀 40,102評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡生蚁,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出戏自,到底是詐尸還是另有隱情邦投,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評(píng)論 5 346
  • 正文 年R本政府宣布擅笔,位于F島的核電站志衣,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏猛们。R本人自食惡果不足惜念脯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,442評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弯淘。 院中可真熱鬧和二,春花似錦、人聲如沸耳胎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽怕午。三九已至,卻和暖如春淹魄,著一層夾襖步出監(jiān)牢的瞬間郁惜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評(píng)論 1 272
  • 我被黑心中介騙來泰國打工甲锡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兆蕉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,332評(píng)論 3 373
  • 正文 我出身青樓缤沦,卻偏偏與公主長得像虎韵,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子缸废,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,044評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)包蓝,也就是一...
    悟名先生閱讀 4,149評(píng)論 0 13
  • 函數(shù)聲明和函數(shù)表達(dá)式有什么區(qū)別 (*)解析器會(huì)率先讀取函數(shù)聲明驶社,并使其在執(zhí)行任何代碼之前可以訪問;函數(shù)表達(dá)式則必須...
    coolheadedY閱讀 388評(píng)論 0 1
  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品测萎,去做同樣的事情亡电,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,769評(píng)論 2 17
  • 早安親愛的小伙伴硅瞧!貌似最近更多在分享我走過的地方份乒、做過的事情、聽過的故事腕唧,根據(jù)小伙伴的回應(yīng)和簡書后臺(tái)閱讀量...
    黃疍疍閱讀 357評(píng)論 1 1
  • 無論怎樣掙扎 或者多么順暢 生命總是在不知不覺間往前流逝 漸漸 曾經(jīng)的激情變平淡 曾經(jīng)的執(zhí)著變平常 曾經(jīng)的驕傲變平...
    梁木子閱讀 200評(píng)論 1 1