紅寶書第五講：函數聲明與表達式小白詳解
資料取自《JavaScript高級程序設計（第5版）》。
查看所有教程：紅寶書學習大綱
一、函數聲明：先上車后買票
1. 基本語法
用 function 關鍵字直接定義函數：
function 打招呼() {
console.log("你好！");
}
2. 核心特點
-
提前可用（提升）：函數聲明會被自動提升到作用域頂部，可以先調用后定義[1]：
打個招呼(); // ? 正常執行 function 打個招呼() { console.log("大家好！"); }
3. 適用場景
適合需要多次復用的邏輯模塊，或需要提前調用的功能。
二、函數表達式：先買票再上車
1. 基本語法
將匿名函數賦值給變量：
const 求和 = function(a, b) {
return a + b;
};
2. 關鍵區別
-
無法提前使用：變量名會被提升，但函數必須賦值后才能調用[1]：
sayHello(); // ? 報錯：未賦值 const sayHello = function() { console.log("Hi!"); }; -
結尾必須加分號：因為它本質是變量賦值語句[2]：
const 打印 = function(msg) { console.log(msg); }; // ?分號不可少
3. 使用場景
適合需要靈活賦值的場景（如回調函數、條件判斷中動態選擇函數）。
三、對比與易錯點
對比表：函數聲明 vs 表達式
| 特征 | 函數聲明 | 函數表達式 |
|---|---|---|
| 提升行為 | 整個函數被提升 | 變量名提升，但賦值未被提升[1] |
| 分號結尾 | 不需要 | 必須加分號[2] |
| 適用范圍 | 全局或函數作用域 | 可在塊級作用域中 |
舉例說明：作用域差異
{
function 內部函數() { } // 實際被提升到全局作用域
const 內部函數表達式 = function() {};
}
console.log(內部函數()); // ? 正常執行
console.log(內部函數表達式); // ? ReferenceError（變量未定義）
四、手把手練習
任務1：用函數聲明實現乘法運算
function 乘積(x, y) {
return x * y;
}
console.log(乘積(3, 4)); // 12
任務2：用函數表達式觸發問候
const 問好 = function(名字) {
return `你好，${名字}！`;
};
console.log(問好("小明")); // 你好，小明！
常見錯誤
-
漏交分號：（函數表達式末尾）
const 錯誤寫法 = function() {} // ? 報錯：預期語句結束符
總結
- 需要提前調用 → 函數聲明
- 靈活控制邏輯 → 函數表達式
初學建議優先使用函數聲明，避免變量提升導致的陷阱！
目錄：總目錄
上篇文章：紅寶書第四講：JavaScript原始值與引用值行為差異詳解
-
函數聲明提升與表達式未提升的對比，《JavaScript高級程序設計（第5版）》 第10章 ? ? ?
-
函數表達式結尾必須加分號，類似于變量初始化，《JavaScript高級程序設計（第5版）》 第10章 ? ?
