红宝书第五讲:函数声明与表达式小白详解
资料取自《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章 ↩
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。