Function 函式

function 是指一段經過包裝的 JavaScript 程式，主要用於程式碼的重複使用，變數等資料的隱藏。而將程式寫成 function 後只要呼叫就可以重複使用。

定義和執行

一個完整的 Function 通常由名稱、參數、主要程式等幾個部分組成，會隨著定義方法的不同而有所差異，目前比較常見的定義方式有：

• 函式宣告：function 名 () {}
• 函式運算式：將匿名函式賦值到變數中，例如 let 變數 = function () {}
• 函式建構式：new 一個 function 物件，例如 let 變數 = new Function(參數, 程式)
• 箭頭函式：省略 function 關鍵字，以箭頭表示，例如 (參數) => {程式}

函式宣告

函式宣告是最簡單也最常見的 Function 定義方式，由名稱、參數、以及 {} 區塊中的程式碼組成。

function 函式名 (參數) {
    // 執行程式
};

定義好的 function 並不會馬上被執行，而是要等到有人呼叫它時才回執行：

// 呼叫 function
function名();

範例：

// 定義 function
function addNum () {
    console.log('執行 addNum 了');
};

// 呼叫 function
addNum(); // console 顯示 '執行 addNum 了'

函式運算式

函式運算式是透過 let 變數名稱 = function(參數){ ... }; 的方式將一個匿名函式透過 = 指定給某個變數。

匿名函式是指不具有名稱的 function，例如 function a () 為具名函式；function () 則為匿名函式

// 定義
let 變數名稱 = function () {
};
// 呼叫
變數名稱();

範例：

// 定義 function
let add = function () {
    console.log('執行 add 了');
};

// 呼叫 function
add(); // console 顯示 '執行 add 了'

建構式

建構式式指使用 JavaScript 創建物件的方法，利用 new Function (Function 必須大寫) 來定義新的函式，不過這個方法因為沒有自己的區塊 {} 無法定義變數，在操作上也有很大的侷限性所以較少使用。

// 定義
let 變數 = new Function(參數, 程式);
// 呼叫
變數();

範例：

// 定義 function
let a = new Function('console.log("執行了")'); // 建構式中 function 中的內容必須以引號包裹

// 呼叫
a();

箭頭函式

箭頭函式也稱為箭頭函式運算式，是在 JavaScript ES6 中新增的定義方式，它簡化了 function 關鍵字，並以 => 來連接參數和程式區塊，語法如下：

// 定義
let 變數 = (參數) => {
    // 程式
}
// 呼叫
變數();

範例：

// 定義
let a = () => {
    console.log('這是一個箭頭函式');
}
// 呼叫
a();

當區塊內只有一行程式時，也可以將箭頭函式簡寫為：

let a = () => console.log('簡寫');

上一篇：[快速入門前端 52] JavaScript：Object 物件
下一篇：[快速入門前端 54] JavaScript：Function 函式 (2) 參數和回傳
系列文章列表：[快速入門前端] 系列文章索引列表