[快速入门前端 53] JavaScript：Function 函式 (1) 函式的种类

Function 函式

function 是指一段经过包装的 JavaScript 程式，主要用于程式码的重複使用，变数等资料的隐藏。而将程式写成 function 后只要呼叫就可以重複使用。

定义和执行

一个完整的 Function 通常由名称、参数、主要程式等几个部分组成，会随着定义方法的不同而有所差异，目前比较常见的定义方式有：

函式宣告

函式宣告是最简单也最常见的 Function 定义方式，由名称、参数、以及 {} 区块中的程式码组成。

function 函式名 (参数) {    // 执行程式};

定义好的 function 并不会马上被执行，而是要等到有人呼叫它时才回执行：

// 呼叫 functionfunction名();

範例：

// 定义 functionfunction addNum () {    console.log('执行 addNum 了');};// 呼叫 functionaddNum(); // console 显示 '执行 addNum 了'

函式运算式

函式运算式是透过 let 变数名称 = function(参数){ ... }; 的方式将一个匿名函式透过 = 指定给某个变数。

匿名函式是指不具有名称的 function，例如 function a () 为具名函式；function () 则为匿名函式

// 定义let 变数名称 = function () {};// 呼叫变数名称();

範例：

// 定义 functionlet add = function () {    console.log('执行 add 了');};// 呼叫 functionadd(); // console 显示 '执行 add 了'

建构式

建构式式指使用 JavaScript 创建物件的方法，利用 new Function (Function 必须大写) 来定义新的函式，不过这个方法因为没有自己的区块 {} 无法定义变数，在操作上也有很大的侷限性所以较少使用。

// 定义let 变数 = new Function(参数, 程式);// 呼叫变数();

範例：

// 定义 functionlet 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) 参数和回传
系列文章列表：[快速入门前端] 系列文章索引列表