2016年5月11日 星期三

[筆記] 談談JavaScript中的IIFEs(Immediately Invoked Functions Expressions)


為了要進一步了解不同的framework程式撰寫的意思,我們需要進一步學習和了解IIFEs這個概念。

IIFEs(Immediately Invoked Functions Expressions) 其實可以就字面上直接來理解,Immediately就是立即的意思,invoked則是執行某個函式時,「執行」的意思,function expression是一種用來建立function的方法,總括來說,就是用function expression的方式建立函式後並立即執行它。

下面我們將做更進一步的介紹和說明。

function statement和function expression

在之前的文章中,我們有提到,建立function的方法通常有function statement和function expression這兩種方式,如果還不太清楚的話,可以參考這篇[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions,這裡就不另外贅述。

Immediately Invoked Functions Expressions (IIFEs)

那麼什麼是IIFEs呢?如同文章一開始所敘述的,IIFEs指的就是透過function expression的方式來建立函式,並且立即執行它。我們要怎麼作呢?

首先我們可以用console的方式,先來看一下,我們剛剛建立的SayWelcome呼叫出來會長什麼樣子。

結果會發現,把SayWelcome呼叫出來後,它會直接回傳整個函式的程式碼內容,這是尚未"執行(Invoked)"程式碼的結果。


如果是IIFEs就在這段程式碼的最後,加上一個執行的指令,也就是括號( )


在我們執行程式的同時,這段函式就會立即被執行了


這裡面同樣可以帶入參數


讓我在把function裡面的console.log改成return,在看一次。

原本function expression的程式碼如下:


這時候,如果我直接呼叫SayWelcome_IIFEs這個變數出來看的話,會得到如下的結果:


如果我把它改成IIFEs的話


就會直接得到如下的結果


這時候要注意的是,在利用IIFE的寫法之後,原本的變數SayWelcome_IIFEs已經變成function回傳的"字串",它已經是字串了,所以我們沒辦法在去執行它!

例如:


這時候因為SayWelcome_IIFEs已經是字串了,所以如果我們在SayWelcome_IIFEs後面又加上( )去執行它的話,會出現錯誤!console視窗會回傳這不是一個函式(所以沒辦法執行invoked它)。

更深入的應用IIFEs

記得我們在[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions這篇中有提到expression的概念,Expressions指的是輸入後能夠直接回傳值的一串程式(a unit of code that results in a value),我們一般可能會把它存成一個變數,但是它不一定要被存成一個變數。

一般的expression像是我可以直接在程式中輸入,數值、字串、甚至是物件,這時候去執行程式的時候,程式可以正確執行,而console視窗並不會有任何內容。


如果我希望我們的function也可以用這種方式來執行,而不用去把它建立在任何變數的話,我們可以怎麼做呢?

首先,我們可能會想這麼做:


但是這麼做是不可行的,因為JavaScript引擎在解析程式碼的時候,它會認為你現在要輸入function statement,因為你用function做為開頭,可是你卻沒有給到function的名稱,這時候會得到如下的結果:


所以,這時候我們要做的是,告訴JavaScript引擎說,這一整個並不是function statment,要達到這樣的目的,我們要讓引擎在解析程式的時候,不是以讀到function做為開頭。

為了要達到這樣的目的,我們最常使用的做法就是用括號( )把funtion( ){ }包起來,像是這樣:


因為我們只會在括弧內放入expression,例如(3+2),而不會放statement在括弧內,所以JavaScript就會以expression的方式來讀取這段函式。

在這種情況下,這個function會被建立,但是不會被存在任何變數當中,也不會被執行。

結合剛剛上面IIFEs的概念,我們可以在建立這個function的同時,將這個function加以執行,我們同樣只需要在最後加上括號( )就可以了:


這樣IIFEs的型式,會在許多的framework中都看得到,透過這樣的方式,我們可以"直接執行某個函式(executing code on the fly)"

附帶一提的是,如果我們想要把物件也直接用expression來表示的話,同樣也可以用( )來把我們的物件包起來就可以了:


程式範例

//function statement
function SayHello(name){
 console.log("Hello "+name);
}
SayHello("PJCHEN");

//function expression;
var SayWelcome = function(name){
 console.log("Welcome, "+name);
}
SayWelcome("PJCHEN");
console.log(SayWelcome);


//Immediately Invoked Functions Expressions (IIFEs)
var SayWelcome_IIFEs = function(name){
 return("Welcome, "+name);
}("PJCHEN");
console.log(SayWelcome_IIFEs());

//Expression
(function(name){
 console.log("Welcome, "+name);
}("PJ"));


({
 name:"PJCHEN",
 interest:"website engineer"
})
→回到此系列文章目錄

Share:

0 意見:

張貼留言