程式導師實驗計畫 [第二週] JavaScript 最後一塊拼圖:函式
基礎的函式與作用域理解可以參考這篇
[JavaScript 函式與作用域]
下列紀錄一些函式的理解
使用函式宣告而不是函式表達式
陳述句 vs 表達式
首先要先理解什麼是 Statement
(陳述句)與 Expression
(表達式))
Expression 表達式
- 程式碼最終會產生一個數值
打開瀏覽器開發者工具的 console
a = 3 ; 回傳 3 代表這是 Expression
10 + 5 ; 回傳 15 代表這是 Expression
a === 3 回傳 true 代表這是 Expression
a = { name: ‘Luke Lin’} 代表這是 Expression
Statement 陳述句
- 程式碼不會產生一個數值
if()
中的(),需要boolean
來決定這個程式會不會成立,所以()
之中會是表達式,但if(){}
這段程式碼本身不會回傳數值,因此為 Statement 陳述句,。
1 | if (a === 3) { |
函式陳述句 vs 函式表達式
函式也有分陳述句(Statement)
跟表達式(Expression)
Function Statement
函式陳述句
函式陳述句的程式碼本身不會回傳數值,除非執行它。
這種先宣告定義,等待被呼叫的寫法,也就是 Function Declation 函式宣告 ,在電腦創造他的階段就會被設定進記憶體,發生 提升Hoisting
的現象。
所以下面這段程式裡,function foo
先執行才宣告也不會報錯,因為在創造階段function foo
就已經被設定進記憶體中了。
1 | foo(); |
Function Expression
函式表達式
function 會賦值到變數test
中,而function
本身沒有名字,也稱作匿名函式
。
1 | const test = function () { |
因為在電腦的創造階段被設定的是test
的記憶體,因此當test
在宣告function
之前被執行,test
之中是沒有function
的,所以會報錯,這個規則使得箭頭函式可以完全取代函式表達式。
參考資料
使用預設參數的語法,而不是變動函式的參數
絕對不要變動參數裡原有的資料
1 | // really bad |
不要將參數命名為 arguments,這樣會將覆蓋掉函式作用域傳來的 arguments
arguments: 指的是函式被呼叫時,真正傳入的參數值,指的是已經內建有一個了,不要再命名一個了。
1 | // bad |
使用預設參數時請避免副作用
副作用是什麼?
函式的副作用並不代表好壞,具有副作用代表著可能會更動到外部環境,或是更動到傳入的參數值。
在使用預設參數時產生了副作用容易造成思緒混淆。
1 | var b = 1; |
切勿變更參數
直接更動作為參數的資料可能會產生呼叫者不期望的的副作用
1 | // bad,變動到傳入的參數數值 |
永遠將預設參數放在最後
1 | //bad |
切勿重新賦值給參數
1 | // bad |
以上就是這篇的筆記內容
推推的參考資料: