2016年3月10日 星期四

[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions

圖片來源:Udemy

在這堂課中,我們會說明function statements 和 function expressions這兩種不同建立函式的方式,這是兩個許多新手在學JavaScript會有些搞不懂的地方。

Expressions

我們先來看一下Functions Expressions,其中,Expressions指的是輸入後能夠直接回傳值的一串程式(a unit of code that results in a value),我們一般可能會把它存成一個變數,但是它不一定要被存成一個變數

簡單來說,只要你輸入的那串程式執行後能直接回傳一個值,它就是個expression。

舉例來說,我在Chrome的console當中輸入" a = 3 "的時候,它會直接回傳3的值;輸入"2 + 3"的時候,它會直接回傳5;輸入a = { }的時候,它會回傳一個為物件的值。這種輸入一段程式後,會直接取得回傳一個值的程式內容,我們就稱為Expression。

Statements

那麼Statements呢?

我們來看看這段程式:


在這段程式中"a === 3"是一個expression,因為它可以直接回傳值(即,true 或 false);而if這個指令,則是一個statement,因為它不會直接回傳一個值,我們也不能將它指定為一個變數:


Function Expressions 和 Function Statements

在JavaScript中,Function就像物件一樣,它可以透過Expression或Statements的方式加以操作。

Function Statements

首先,我們來看一下Function statements:


這是一串Function Statements,它不會直接回傳任何的值。Function Statements的特色在於,它在程式執行的最開始,該函式就會透過hoisting先被儲存在記憶體中(如果不清楚Hoisting的概念,可以參考:[筆記] 談談Javascript 中的 Hoisting),這指的也就是,我可以在執行這段程式前,就去呼叫這個函式來使用而不會出現任何的錯誤,像是這樣:


由於在JavaScript中function就像object一樣,其中這個函式name屬性的值為greet,code屬性的值為"console.log('hi')"。

圖片來源[Udemy] JavaScript: Understanding the Weird Parts

當我們要執行這個函式的時候,只要輸入greeting()就可以了。

如果我們用console.log(greet),會得到這個函式的程式內容,所以如果我們想要執行這個函式,就在最後面再加上"( )" 就可以了:


Function Expressions

再來我們看一下Function Expressions,我們先前有提過,在JavaScript中function就和物件一樣([筆記] JavaScript中函式(Function)就是一種物件(Objects)),所以我們可以把它存在一個變數當中。在這裡"function(){ ... }"這段就是Function Expression,而我們把function expression的值存成SayHello這個變數:


在這個例子中,我們一樣會先建立一個Function物件,但在這個function的name屬性並沒有給它值(因為我們在括號前面並沒有給任何名稱),之所以可以這麼做是因為,我們在function expression前面已經把它指定到一個變項(SayHello)了,所以可以直接用這個變項名稱來指稱這個函式。對於這種name屬性沒有值的函式,我們可以稱作匿名函式(anonymous function 或 function literal)

圖片來源:[Udemy] JavaScript: Understanding the Weird Parts,此圖的函式名稱為anonymousGreet。

同樣的,如果我們想要執行這個函式,一樣輸入"SayHello()"就可以了。

當我們輸入"console.log(SayHello)"的時候,我們一樣會得到這個函式的程式內容,因此,若我們想要執行這段程式內容,同樣只要在最後面加上"( )"就可以了。


然而,和Function Statements不同的地方是,因為在一開始執行程式初期,只會先建立並儲存變項名稱到記憶體中,也就是只會儲存SayHello到記憶體中,而不會儲存函式的程式內容(這時候SayHello的值是undefined),所以如果我在function前面就試著想要執行function的話,即會出現錯誤訊息:



若是使用Function Expressions,沒辦法在function建立前即去執行該function(會出現錯誤)。

再來看一點特別的吧─函式中的函式

看一下這段程式。

我先建立一個function,名稱屬性的值是log,程式的內容是console.log(a),其中a是這個函式的參數。

接著,我分別去執行log(...),會分別得到如下註解的結果:



同樣地,我們也可以先把這些值指定成一個變數,然後再丟到函式當中,會得到一樣的結果:



如果這時候我的值是函式的話呢?

像是這樣,我們在log()裡面,放入一個function expressions,而且是一個匿名函式(anonymous function),這時候我們等於是直接創造了一個函式來使用(create the function on the fly):


如果看不太懂的話,可以想成這樣會比較容易理解:


這時候會回傳這樣的結果:


那麼,如果我們希望能夠直接執行該函式,我們可以將log( )做一下簡單的修改就可以了:


這樣,就可以在不用建立函式的情況下,直接去執行一個匿名函式。

程式範例

// Function Statements
function greeting(){
 console.log("Hi");
}


// Function Expressions
var SayHello = function(){
 console.log("Hello")
}

function log(a){
 a();
}

log(function(){
 console.log("Hello");
}); 
→回到此系列文章目錄
< br/>

資料來源

[Udemy] JavaScript: Understanding the Weird Parts- Function Statements and Function Expressions
Share:

0 意見:

張貼留言