JavaScript: JavaScript 函数
最后更新：2026-10-13
函数是可复用的代码块——写一次，用无数次。就像菜谱：定义好步骤，每次做菜照着来就行，不用重新发明。不会用函数的程序员，就像每做一道菜都从头试配方，累死还容易出错。
1. 函数是什么
函数把一段逻辑"打包"，给它起个名字，需要时调用就行：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>函数调用</title></head>
<body>
<div id="output"></div>
<script>
function sayHello() {
document.getElementById('output').textContent += '你好！\n';
}
sayHello();
sayHello();
</script>
</body>
</html>
函数的好处：
- 复用：写一遍，到处调用
- 封装：藏住复杂细节，只暴露接口
- 维护：改一处，所有调用方受益
创建函数有两种主要方式：
HTML
<script>
// 函数声明
function greet(name) {
return `你好，${name}！`;
}
// 函数表达式
let greet2 = function(name) {
return `你好，${name}！`;
};
</script>
关键区别：函数声明会被提升（hoisting），你可以在定义之前调用它；函数表达式不会，必须先定义再调用。
HTML
<script>
// 函数声明：可以先用后定义
hello(); // 正常运行
function hello() { console.log('hi'); }
// 函数表达式：先用后定义会报错
// hi(); // TypeError: hi is not a function
// let hi = function() { console.log('hi'); };
</script>
⚠️ 注意： 在
let 声明前访问变量属于"暂时性死区"（TDZ），会直接报错，不是 undefined。所以函数表达式一定要先定义再使用。
3. 参数和默认参数
函数通过参数接收外部数据：
HTML
<script>
function add(a, b) {
return a + b;
}
add(1, 2); // 3
</script>
调用时没传的参数是 undefined。ES6 开始支持默认参数：
HTML
<script>
function greet(name, greeting = '你好') {
return `${greeting}，${name}！`;
}
greet('小明'); // '你好，小明！'
greet('小明', 'Hello'); // 'Hello，小明！'
</script>
💡 提示： 默认参数放在参数列表末尾。放在前面没意义——调用时没法跳过它只传后面的。
4. 返回值（return）
return 把结果返回给调用方，同时终止函数执行：
HTML
<script>
function square(n) {
return n * n;
}
let result = square(5); // 25
</script>
没有 return 或只写 return; 的函数，返回 undefined。
HTML
<script>
function doNothing() {
// 没有 return
}
doNothing(); // undefined
</script>
⚠️ 注意：
return 后面换行会自动加分号，导致返回 undefined：
return // 实际上 return; undefined
obj; // 这行永远不会执行到
解决办法：return 和返回值写同一行，或用括号包起来。
5. 箭头函数（=>）
箭头函数是 ES6 引入的简写语法：
HTML
<script>
// 普通函数
let double = function(n) {
return n * 2;
};
// 箭头函数
let double2 = (n) => n * 2;
// 多条语句需要花括号和 return
let greet = (name) => {
let msg = `你好，${name}！`;
return msg;
};
</script>
语法规则：
- 单个参数可以省略括号：
n => n * 2 - 0 个或多个参数要括号：
() => 'hi'、(a, b) => a + b - 单行表达式自动返回，多行需要
{}+return
▶ 示例：函数基本用法
▶ 试一试▶ 示例：简易计算器
▶ 试一试6. 函数作用域
变量在函数内部声明，只在函数内部有效，外面访问不到——这就是作用域：
HTML
<script>
function test() {
let x = 10; // 局部变量
const y = 20;
var z = 30;
}
test();
// console.log(x); // ReferenceError: x is not defined
</script>
函数可以访问外部变量（闭包的基础），但外部不能访问函数内的变量：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>函数作用域</title></head>
<body>
<pre id="output"></pre>
<script>
let global = '全局变量';
function show() {
let local = '局部变量';
document.getElementById('output').textContent +=
'函数内 global: ' + global + '\n' +
'函数内 local: ' + local + '\n';
}
show();
document.getElementById('output').textContent +=
'函数外 global: ' + global + '\n' +
'函数外 local: 无法访问（局部变量）';
</script>
</body>
</html>
▶ 示例：作用域演示
▶ 试一试7. 回调函数简介
JavaScript 允许把函数当作参数传给另一个函数——传进去的那个就叫回调函数：
HTML
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>回调函数</title></head>
<body>
<pre id="output"></pre>
<script>
function processArray(arr, callback) {
for (let item of arr) {
callback(item);
}
}
let names = ['小明', '小红', '小刚'];
processArray(names, function(name) {
document.getElementById('output').textContent += '你好，' + name + '\n';
});
</script>
</body>
</html>
你其实已经用过回调了——forEach、map、filter 的参数都是回调函数：
HTML
<script>
// 这里的匿名函数就是回调
[1, 2, 3].forEach(function(n) {
console.log(n);
});
// 用箭头函数更简洁
[1, 2, 3].forEach(n => console.log(n));
</script>
💡 提示： 回调是 JavaScript 的灵魂。浏览器的事件处理、定时器、网络请求，全靠回调机制运作。现在先知道"函数能当参数传"就行，后面会深入。
▶ 示例：回调函数实战
▶ 试一试❓ 常见问题
Q 箭头函数和普通函数有什么区别？
A 除了写法更短，箭头函数没有自己的
this，它的 this 继承自外层。在对象方法或事件处理中需要 this 时，用普通函数更安全。简单工具函数用箭头函数没问题。Q 函数可以返回多个值吗？
A 不能直接返回多个，但可以返回数组或对象，然后用解构接收：
function getInfo() { return [name, age]; }，调用时 let [name, age] = getInfo()。Q 参数太多怎么办？
A 参数超过 3 个时，考虑用对象传参：
function createUser({ name, age, city }) {}，调用时 createUser({ name: '小明', age: 20, city: '北京' })。顺序不重要，可读性更好。📖 小节
- 函数声明会提升，函数表达式不会——习惯先定义再使用最安全
- 默认参数让函数调用更灵活，放在参数列表末尾
return终止函数并返回值，没写return就返回undefined- 箭头函数
(a, b) => a + b是简写，单行自动返回，多行需要{} - 函数内声明的变量是局部的，外部访问不到
- 回调函数 = 把函数当参数传，
forEach、setTimeout都在用
📝 作业
- 写一个函数
isEven(n)，判断数字是否为偶数，返回true或false，在页面上测试多组数据 - 写一个函数
formatPrice(price)，接收数字返回格式化的价格字符串（如formatPrice(9.9)返回"¥9.90"），并用箭头函数写法 - 写一个"问候生成器"：用回调函数实现，传入名字数组和问候函数，在页面上显示每个人的个性化问候语
