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

资料取自《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原始值与引用值行为差异详解

下篇文章:红宝书第六讲:作用域链与闭包:厨房里的调味料架原理


  1. 函数声明提升与表达式未提升的对比,《JavaScript高级程序设计(第5版)》 第10章
  2. 函数表达式结尾必须加分号,类似于变量初始化,《JavaScript高级程序设计(第5版)》 第10章

kovli
7 声望4 粉丝