Day14 | JS 函式

❒ 記住,函式也是物件的一種

雖然使用 typeof 檢查 function 會得到 function 的結果,但實際上 function 仍屬於 object 的一種。可以把它想像成被呼叫的特殊物件 ( 值 )。

❒ 函式寫法

函式寫法會包含下面三部分:

1
2
3
4
5
6
// ----- 簡易範例
function myNmae(parm) {
return parm + parm;
}
// 呼叫函式,就會執行此函式
myNmae(5);
  1. 函式的名稱
    • 上方程式碼中 myNmae 部分,名稱可自訂名稱,也有可能沒有名稱,如下方定義函式的方式 - 函式表達式寫法。
  2. 參數
    • () 裡的內容,如有多個參數可使用逗號隔開,上方程式中 parm
  3. 需重覆執行的內容
    • {} 大括號中的內容。

上方範例為函式宣告與呼叫方式,「 透過名為 myName 的關鍵字來宣告函式 」&「 透過 myNmae(5); 呼叫 myName 函式 」,myName 函式裡的 parm 的值就會是 myNmae(5); 傳進來的 5,而 parm + parm 結果就會是 10。

最後透過 return 回傳結果,如果沒有 return 回傳預設會回傳 undefined

❒ 定義函式的方式

➊ 函式宣告

1
2
3
4
function myName(parm){
return parm + parm;
}
myName(5); //10

函式宣告的方式較常使用。

➋ 函式表達式 ( 函式運算式 ) Function Expression

1
2
3
4
5
6
// 變數名稱 = function(參數){…}
// 將函式透過 = 來指定給某個變數
const myName = function(parm) {
return parm + parm;
}
myName(5); //10

與函式宣告不同,函式表達式 function 後方沒有名稱,也可稱「 匿名函式 」,但如果要加名稱也是可以,但它就只會在「 自己函式的區塊內 」也就是 {} 內有效。

➌ 使用 new Function 建立函式

1
2
3
// 透過 new 來建立 Function 物件
let myName = new Function('parm1', 'parm2', ' return parm1 + parm2 ');
myName(5, 5); // 10

new Function 建立的函式物件,每次執行都會進行解析字串的動作 ( 'return parm1 + parm2' ) ,所以效能較差,實務上較少使用。

❒ 陳述式 Statement 與表達式 Expression

陳述式 Statement → 不會回傳值。
表達式 Expression → 會回傳一個值。

  • JavaScript 語法基本上分為「 陳述式 statement 」與「 表達式 expression 」兩大類。

  • 陳述式 ( statement ) 大多是一個片段或幾個詞彙,其中也會混用到表達式 ( statement ) 的詞彙。運作上表達式 ( statement ) 可以獨立出現,也可以與陳述式 ( statement ) 混用。

    1
    2
    3
    4
    5
    6
    // 使用函式陳述式宣告一個函式,但運行後回傳結果為表達式
    function number() {
    return 5;
    }
    // 呼叫函式,回傳結果
    number();

❒ 陳述式 Statement

  • JavaScript 的語句類型,用於命令執行指定的一系列操作,最大的特徵是「 不會回傳結果 」。

  • 陳述式不會回傳結果,所以無法賦予值在其他變數上,會顯示錯誤訊息。

    1
    2
    3
    4
    5
    // 錯誤寫法:把 statement 賦予在 expression 上會顯示錯誤訊息,如下
    var ming;
    ming = if (1 === 1){
    console.log('55');
    };

    錯誤訊息

  • 如果程式碼中只有 {} 是物件不會是陳述式,需要在 {} 裡面加入程式碼才會變成陳述式。另外下方範例中 {} 內使用 var 宣告,外層可讀取到變數,但使用 letconst 外層是無法讀取到內層的 ming 變數。可參考後天的 「 Day 14 | 關於 let、 const、var 」文章。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // --- 正確寫法
    {
    var ming = '小明';
    }

    // --- 錯誤寫法:陳述式不會回傳值所以不能賦予在變數上
    var a = {
    var ming = '小明';
    }
    // --- 正確寫法
    var a = {
    ming = '小明';
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 注意:下面兩種寫法所呈現出來的意思是完全不同的
    //--- 陳述式
    {
    let ming = '小明';
    }

    //--- 物件實字
    let a = {
    ming = '小明';
    }

常見的陳述式

  • 宣告 ( varletconstfunction )
  • if .. elseswitch
  • 迴圈 ( for )
  • 陳述式完整分類可參考 MDN 文件
1
2
3
4
5
6
7
// 陳述式們
var a;

{
let ming = '小明';
}

❒ 表達式 ( 運算式 ) Expression

  • 又可稱為表示式、運算式,經常透過一些符號結合上下語句並運算及「 回傳結果 」。

常見的表達式

  • 純值
  • 變數
  • 運算子
    • 算術運算子
      • 四則運算 ( 加、減、乘、除 )
      • 一元運算子 ( 正號 +、負號 -、遞增 ++、遞減 —- )
      • 二元運算子 ( 取餘數 % )
    • 比較運算子 ( =====!=!==><<=>= )
    • 邏輯運算子 ( &&||! )
    • 其他運算子可參考 MDN 運算式與運算子
  • 正規表達式
  • 函式表達式
1
2
3
4
// 表達式
1 === 1
5 + 6

❒ 函式陳述式 Function Statement ( 具名函式 )

Function Statement 會直接宣告一個函式

  • 為函式宣告,直接宣告一個函式並給它一個名稱,不須使用變數 ( varletconst ) 來定義一個函式。
  • 「 函式陳述式 Function Statement 」與「函式表達式 Function Expression 」兩者提升結果不同,下篇講到提升 hoisting。
1
function callName(){ }

❒ 函式表達式 Function Expression ( 匿名函式 )

Function Expression 會先宣告變數,再賦予值。

為變數宣告,先會宣告一個變數,並用等號把後方的函式賦予到前面宣告的變數上。

1
var callName = function(){}

參考資訊