JS系列第1章之IIFE
前言
之前在網上看了很多關於JS的知識,再加上自己之前看的一些經典書(包括《javascrtipt高級程序設計》、《你不知道的JS》、《JavaScript語言精粹》等),所以回顧總結一下遇到的一些JS經典問題和重難點。
一、函數聲明和函數表達式
在介紹什麽的IIFE之前,先區分一下 函數聲明 和 函數表達式。
定義函數的方式有兩種:函數聲明 和 函數表達式。
1 函數聲明(function declaration),即形如:
function funcName(){
? ?函數體......
}
函數聲明的特點是:
- 必須要有函數名,它不能匿名;
- 函數聲明提升
- 不能在函數聲明後面加()直接調用它;
2 函數表達式,最常見的語法形式是:
var funcName = function(){
? ?函數體......
}
函數表達式的特點是:
- 可以匿名;
- 沒有聲明提升,使用前必須先賦值
- 可以在 函數表達式後面加()來 運行/調用函數
二、什麽是IIFE
IIFE(Immediately-Invoked Function Expression),即 立即調用的函數表達式。它的創建過程是:
1 聲明一個匿名函數;
2 馬上調用這個匿名函數
典型的例子是:(function funcName(){....})()
它還有一個變形寫法,更有利於代碼壓縮,即
!function(){...} ()
“!”的存在讓整句話可以當一元運算表達式來看,這樣“function(){}”就被看成了一個函數表達式,執行結果再作為“!”的operand
三、IIFE的作用
1 隔離作用域
IIFE最主要的作用,就是用來隔離作用域。
在ES6之前,JS只有函數作用域,而沒有塊級作用域。那麽為了能夠隔離作用域,就只能把代碼用一個函數框起來了,然後用所謂立即執行函數的方式,來模擬局部作用域。
具體的例子見:
例1
2 惰性載入
即
用IIFE寫惰性載入,因為函數被執行引擎以同步的方式立即執行了,所以當在之後的代碼訪問這個變量時,可以直接返回計算後的篩選結果。
四 Reference
??1 Javascript高級程序設計;
??2 什麽是立即執行函數?有什麽作用?;
??3 這段 JavaScript 代碼是什麽意思?;
??4 為什麽要有js立即執行函數,存在的意義是什麽?;
JS系列第1章之IIFE