正在加载...
函数
循环回答的是工作何时重复。函数回答另一个问题：把一块工作放在哪里，好用名字再次运行？函数就是带名字的配方。你定义一次。需要这些步骤时就调用它。复制粘贴会淡化；名字留下。
什么是函数？
在 JavaScript 里，用关键字 function、名字、括号 () 和 { } 里的函数体来声明。在你调用函数——写下名字再加 ()——之前，函数体里什么都不会跑。可以想成：「先打包步骤，再按播放。」
函数由哪些部分组成
📊 函数解剖
| 部分 | 作用 | 日常用法 |
|---|---|---|
关键字 function |
开始声明 | 「这里来一个有名字的配方」 |
| 名字 | 之后用它来调用 | sayHi、showTotal——清晰动词更好记 |
名字后的 () |
调用位置 / 以后还可放输入 | 空的 () 仍表示「现在执行」 |
{ } 函数体 |
每次调用要跑的步骤 | 打印、计算、更新页面 |
调用 name() |
立刻执行函数体 | 不用重写函数体就能复用 |
只定义会保存配方。调用才会执行。若不调用，函数体保持安静——这在语言里很正常，不是故障。
function sayHi() {
console.log("Hi");
}
sayHi();
先定义，再调用
前三行定义 sayHi。最后一行调用它。控制台里应看到 Hi。没有 sayHi();，函数存在但不会运行。
function beep() {
console.log("beep");
}
beep();
beep();
复用同一个函数体
一次定义、两次调用——beep 会打印两次。这就是重点：步骤写一遍，故事需要那个声音时再跑。以后改函数体，所有用这个名字的调用点都会跟着更新。
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();
函数体可以放多步
一次调用里，两行按顺序执行：先是 loading，再是 ready。函数不限于一条语句——把整件小事放进花括号即可。
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();
局部工作留在配方里
city 和 line 生活在 greetCity 内部。每次调用都会拼出消息并打印 Hello from Tehran。这种写法里，外面不需要这些名字——扳机就是调用本身。
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();
为页面执行工作
和之前的 DOM 课一样：找到元素，设置 textContent。包进函数后，按钮、定时器或脚本可以在页面需要更新时调用 fillOut()——一个名字，一件事。
在页面上展示函数
定义一个把短句写入段落的函数，再从脚本里调用，让访客看到结果。
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>
页面显示 Hello from a function。showMsg 的函数体写入了 DOM；底部的调用按下了播放。改字符串、刷新，再读新行。下一课深入参数——调用时放进括号里的值。
自己试试
- 声明
function hello()打印"hello"，并调用一次。 - 不重写函数体，再调用同一函数第二次。
- 做一个函数体按顺序打印两个不同词的函数。
- 在函数里用
let拼字符串并打印。 - 写一个把
#out设为"ok"的函数（或用演示里的 id）。 - 在 HTML 演示里只改消息文字，刷新并读段落。
常见错误
- 定义了函数却忘了用
()调用 - 写
sayHi却不加()——只提到名字，不跑函数体 - 复制粘贴同样几行，而不是把一个函数调用两次
- 把工作放在
{ }外面，却指望函数名「拥有」它 - 把本课和参数/
return混在一起——那些在后面；这里聚焦定义 + 调用
小结
- 函数把步骤装在一个名字下
- 用
function name() { … }声明 - 用
name()调用以运行函数体 - 一个函数体、多次调用——就是复用
- 函数体可含多条语句和
let局部工作 - 页面更新很适合放进需要时再调用的函数
- 下一课：参数——在调用时传入值
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
8
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部