2016年1月20日 星期三

[筆記] JavaScript中coercion的實際使用--建立函式預設值(default value)

圖片來源:JavaScript 101

由於在目前的JavaScript中,撰寫函式的時候並不像PHP或其他程式語言可以直接賦予預設值(未來應該可以), 因此在這篇文章中,我們會說明如何用coercion這樣的特性來建立非常簡潔的函式預設值。

我們先建立一個函式,取名叫做greet。這個函式非常簡單,包含一個變數,就是去呼叫名字(name)而已。


在最下面的地方,我們去呼叫這個函式,並且代入"PJCHENder",可想而知的,console的結果如下:


如果在函式中沒有代入任何的值的話,會怎麼樣呢?



如果我們在函式中沒有將name給值,那麼會發生什麼事呢?


結果如下:


#1:和其他程式語言不太一樣的地方,JavaScript並沒有回傳任何錯誤的訊息,而是將name直接回傳"undefined"。這是因為在程式執行的過程中,一個新的execution context被建立,而name這個變項就被建立在函式裡面,只是還沒被給值而已,在變項建立後尚位給值前,該變項就被賦予了undefined這個值(這是類似Hoisting的概念,可參考:[筆記] 談談Javascript 中的 Hoisting)。

#2:undefined被強制轉換成字串

利用coercion這樣的特性建立預設值 (default value)

那麼,我們要如何利用coercion這樣的特性來建立預設值呢?

作法如下,我們新增一列指令就可以達到預設值的效果了。


這時候如果name沒有值,就會顯示<Enter your name here>。

為什麼這樣短短一行就可以當作預設值呢?

[筆記] 談談JavaScript的Precedence和Associativity中我們說明過Precedence和Associativity的觀念,所以當一列程式碼中,同時出現兩個運算子(Operators)時,我們可以在MDN Operator precedence來查一下"="和"||"誰的Precedence比較前面:


因為 "||" 比 "=" 擁有更高的precedence,所以會先執行"||"的部分,而且"||"是由左至右讀取。

所以讓我們先來看一下" || ":

我們可以發現,當我分別輸入true || false, true || 'Hello' 和 false || 'Hello'都會分別回傳不同的結果。

當左邊是true的時候,因為會先讀取到true,所以會直接回傳true;但當左邊是false的時候,就會判斷右邊是true會false,當右邊是一個字串時,它會判斷是true,同時回傳字串


同樣地,因為coercion的關係,如果"||"的左邊沒有值,則都會被判斷成false。



而這也就是為什麼我們可以用那一行簡短的指令,當作預設值的寫法,因為,當name不存在時就會是false,這時候就會讀取"||"右邊的字串,同時回傳該字串的值。

但這樣預設值的寫法有一個限制,就是變數不能是0,如果變數是0的話,會被當成false,結果則會跑出預設值

→回到此系列文章目錄

資料來源

Share:

0 意見:

張貼留言