第4课：函数基础——JS的“魔法咒语”

愿你心中有火，眼里有光，不惧山高路远，向着梦想的方向，勇敢地迈出每一步，用汗水浇灌希望，以坚持铸就辉煌，今日的拼搏，定能成就明日的荣耀！

欢迎来到「JavaScript 魔法学院」第 4 课！今天我们将学习函数------JS 世界的"魔法咒语"，它能让你用一句咒语重复召唤强大效果！文末实战带你开发「年会抽奖器」，代码可用！

一、函数：JS 的"可复用咒语"

1. 为什么需要函数？

现实类比：

想象你每天都要召唤"火球术"，不需要重复画法阵，只需喊出咒语名称！
函数就是封装重复操作的代码块，通过名称调用。

核心价值：

✅ 代码复用 ✅ 逻辑清晰 ✅ 便于维护

2. 两种定义方式

① 函数声明（经典咒语）

js 复制代码

// 定义咒语
function fireBall(target) {
  console.log(`🔥 火球攻击 ${target}！`);
}

// 调用咒语-可多次调用
fireBall("哥布林");  // 🔥 火球攻击 哥布林！
fireBall("小笨蛋");  // 🔥 火球攻击 小笨蛋！

② 函数表达式（符咒卷轴）

js 复制代码

// 将咒语写在卷轴中
const heal = function() {
  console.log("🩹 生命值恢复50点！");
};

heal();  // 使用卷轴

关键区别：

函数声明可先调用后定义（变量提升）

js 复制代码

  fireBall("哥布林");
  function fireBall(target) {
    console.log(`🔥 火球攻击 ${target}！`);
  }

函数表达式必须先定义后调用

js 复制代码

  heal();
  const heal = function () {
      console.log("🩹 生命值恢复50点！");
  };

二、函数的"咒语要素"

1. 参数与返回值

参数： 咒语需要的"施法材料"

js 复制代码

function createIceWall(width, height) {
  return `❄️ 生成冰墙：${width}m x ${height}m`;
}
const wall = createIceWall(5, 3);  // 传入参数
console.log(wall);  // ❄️ 生成冰墙：5m x 3m

返回值： 咒语执行后的"产物"

js 复制代码

function sum(a, b) {
  return a + b;  // 用return返回结果
}
console.log(sum(2, 3));  // 5

*注意：*无 return 时函数返回 undefined

2. 作用域与闭包（进阶概念）

作用域： 咒语的有效范围

js 复制代码

function magic() {
  const secret = "magic专用，不外出！";  // 局部变量，外部无法访问
  console.log(secret);
}
magic();        // 正常
console.log(secret);  // 报错！

闭包： 咒语记忆环境的能力（后续课程详解）

三、实战：随机抽奖器(点名)

1.完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第4课：函数基础</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            /* 浅蓝色背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            background-color: #ffffff;
            /* 白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        button {
            background-color: #4CAF50;
            /* 绿色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 20px;
        }

        button:hover {
            background-color: #45a049;
            /* 按钮悬停时颜色加深 */
        }

        #result {
            font-size: 20px;
            color: #333333;
        }

        #result span {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <button onclick="startLottery()">点击抽奖</button>
        <p id="result"></p>
    </div>
    <script>
        const staffs = ["同学张三", "同学李四", "同学王五", "同学赵六", "同学陈七"];

        // 封装抽奖逻辑
        function startLottery() {
            const winner = getRandom(staffs);
            showResult(winner);
        }

        // 随机选择函数
        function getRandom(array) {
            const index = Math.floor(Math.random() * array.length);
            return array[index];
        }

        // 展示结果函数
        function showResult(name) {
            const resultEl = document.getElementById("result");
            resultEl.innerHTML = `🎉 中奖者：<span style="color: gold;">${name}</span>`;
        }
    </script>
</body>

</html>

2. 效果演示

3. 代码解析

模块化拆分：将抽奖拆分为随机选择、结果展示两个函数
Math.random()：生成 0-1 随机数，结合数组长度计算索引
事件绑定：按钮点击触发 startLottery

下节预告

第 5 课：DOM 操作进阶------网页的"变形术"

动态创建/删除元素
元素样式的高级操作
实战：开发「待办事项列表」！

关注公众号，回复【JS】获取本课源码+工具包！