Day14 | JS 函式

發表於 分類於
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 宣告，外層可讀取到變數，但使用 let、const 外層是無法讀取到內層的 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 = '小明';
    }

常見的陳述式

  • 宣告 ( var、let、const、function )
  • if .. else、switch …
  • 迴圈 ( 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 會直接宣告一個函式

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

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

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

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

1
var callName = function(){}

參考資訊