04-function

04 Function：函数、参数与返回值

这是 javascript-development-lab 的第 04 个独立最小实验。

本章只解决一个核心问题：当一段计算逻辑需要被重复使用时，JavaScript 如何把它封装成函数？

1. 本章学习目标

理解并实际观察：

• function
• 函数名称
• 参数 parameter
• 实参 argument
• return
• 函数调用
• 函数内部变量
• 基础作用域
• 箭头函数

本章暂时不加入按钮点击、表单输入等交互事件，这些会在后面的 Event 章节中单独研究。

2. 实验内容

页面包含三个最小实验：

1. 使用普通函数计算“单价 × 数量”。
2. 使用参数和 return 计算折扣后的金额。
3. 使用箭头函数统一格式化价格。

示例数据保持简单：

const productPrice = 29;
const productQuantity = 12;
const discountRate = 0.1;

然后把计算逻辑放进函数，而不是把公式散落在不同位置。

3. 核心知识

function

最基本的函数结构：

function calculateSubtotal(price, quantity) {
  return price * quantity;
}

可以把它理解为：

输入数据
↓
函数处理
↓
return 返回结果

参数与实参

函数定义中的：

price, quantity

是参数。

调用函数时：

calculateSubtotal(29, 12)

其中 29 和 12 是传入函数的具体值。

return

return 最重要的作用是：把函数内部得到的结果交回函数外部。

例如：

const subtotal = calculateSubtotal(29, 12);

变量 subtotal 接收到函数返回的结果。

作用域

函数内部声明的变量，例如：

function calculateSubtotal(price, quantity) {
  const subtotal = price * quantity;
  return subtotal;
}

这里内部的 subtotal 主要在函数内部使用。

本章只建立“函数内部和函数外部存在范围差异”的概念，更深入的作用域和闭包以后再扩展。

箭头函数

现代 JavaScript 中经常看到：

const formatPrice = value => `$${value.toFixed(2)}`;

它仍然是函数，只是写法更紧凑。

初学时不要急着追求简写，先理解：函数的核心价值是封装和复用逻辑。

4. 数据如何流动

本章最重要的数据链路：

productPrice + productQuantity
↓
calculateSubtotal()
↓
return subtotal
↓
applyDiscount()
↓
return discountedTotal
↓
formatPrice()
↓
DOM 显示结果

这一章开始可以明显看到：一个函数返回的数据，可以继续交给另一个函数处理。

5. 建议修改实验

打开 js/app.js，依次修改下面的数据并刷新浏览器。

实验 1

把：

const productPrice = 29;

改成：

const productPrice = 35;

观察小计和折后金额是否同时变化。

实验 2

把数量从 12 改成 20，观察函数是否需要修改。

正确结果应该是：只修改数据，不修改函数。

这正是函数可复用的价值。

实验 3

把：

const discountRate = 0.1;

改成：

const discountRate = 0.2;

观察 10% 折扣变成 20% 后的结果。

实验 4

把普通函数中的：

return subtotal;

暂时注释掉，再观察页面结果。

思考：函数没有返回值时，外部变量得到的是什么？

测试后恢复代码。

实验 5

把箭头函数：

const formatPrice = value => `$${value.toFixed(2)}`;

改写为普通 function，确认两种写法都能完成同样的任务。

6. 为什么函数非常重要

以后遇到这样的情况：

多个地方都要计算价格
多个地方都要格式化日期
多个地方都要验证数据
多个地方都要生成 HTML

不要反复复制相同代码。

应该首先思考：

这段逻辑能否封装成函数？

函数是后面 JavaScript 项目结构化的基础之一。

7. 本章不要过度扩展

本章重点不是制作真正的交互式购物车，而是理解函数。

暂时不要加入：

• 输入框实时计算
• 点击按钮
• 表单提交
• 商品数组批量计算
• localStorage
• API
• class
• 模块拆分

这些知识后面都会单独研究。

8. 文件结构

04-function/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── README.md

9. 本章完成后应该掌握

看到下面这样的需求时：

“这个计算公式会在多个地方使用，而且输入值可能不同。”

应该首先想到：

函数
+
参数
+
return

而不是把同一个公式复制很多遍。

---

下一章：05 Array：数组基础与数据集合。