红宝书第五讲：函数声明与表达式小白详解

资料取自《JavaScript高级程序设计（第5版）》。 查看所有教程：红宝书学习大纲

一、函数声明：先上车后买票

1. 基本语法
用 function 关键字直接定义函数：

javascript
 代码解读
复制代码
function 打招呼() {
  console.log("你好！");
}

2. 核心特点

• 提前可用（提升）：函数声明会被自动提升到作用域顶部，可以先调用后定义¹：

  javascript
   代码解读
  复制代码
  打个招呼(); // ✅ 正常执行
  function 打个招呼() {
    console.log("大家好！");
  }
  

3. 适用场景
适合需要多次复用的逻辑模块，或需要提前调用的功能。

二、函数表达式：先买票再上车

1. 基本语法
将匿名函数赋值给变量：

javascript
 代码解读
复制代码
const 求和 = function(a, b) {
  return a + b;
};

2. 关键区别

• 无法提前使用：变量名会被提升，但函数必须赋值后才能调用¹：

  javascript
   代码解读
  复制代码
  sayHello(); // ❌ 报错：未赋值
  const sayHello = function() { console.log("Hi!"); };
  

• 结尾必须加分号：因为它本质是变量赋值语句²：

  javascript
   代码解读
  复制代码
  const 打印 = function(msg) { console.log(msg); }; // ✅分号不可少
  

3. 使用场景
适合需要灵活赋值的场景（如回调函数、条件判断中动态选择函数）。

三、对比与易错点

对比表：函数声明 vs 表达式

举例说明：作用域差异

javascript
 代码解读
复制代码
{
  function 内部函数() { }  // 实际被提升到全局作用域
  const 内部函数表达式 = function() {};
}
console.log(内部函数());          // ✅ 正常执行
console.log(内部函数表达式);     // ❌ ReferenceError（变量未定义）

四、手把手练习

任务1：用函数声明实现乘法运算

javascript
 代码解读
复制代码
function 乘积(x, y) {
  return x * y;
}
console.log(乘积(3, 4)); // 12

任务2：用函数表达式触发问候

javascript
 代码解读
复制代码
const 问好 = function(名字) {
  return `你好，${名字}！`;
};
console.log(问好("小明")); // 你好，小明！

常见错误

• 漏交分号：（函数表达式末尾）

  javascript
   代码解读
  复制代码
  const 错误写法 = function() {}   // ❌ 报错：预期语句结束符
  

总结

• 需要提前调用 → 函数声明
• 灵活控制逻辑 → 函数表达式

初学建议优先使用函数声明，避免变量提升导致的陷阱！

目录：总目录 上篇文章：红宝书第四讲：JavaScript原始值与引用值行为差异详解

Footnotes

1. 函数声明提升与表达式未提升的对比，《JavaScript高级程序设计（第5版）》 第10章 ↩ ↩² ↩³

2. 函数表达式结尾必须加分号，类似于变量初始化，《JavaScript高级程序设计（第5版）》 第10章 ↩ ↩²