一、基础函数

定义：封装可重复使用的代码块，通过函数名调用执行

特点：

  • 使用function关键字声明
  • 支持函数声明和函数表达式两种形式
  • 函数声明会提升（可在定义前调用）

示例展示：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为6-1.JavaScript函数-基础函数.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // 函数声明（推荐）
        function greet() {
            console.log("你好！");
        }

        // 函数表达式
        const sayBye = function() {
            console.log("再见！");
        };

        // 调用函数
        greet();     // 输出：你好！
        sayBye();    // 输出：再见！
    </script>
</body>
</html>

注意事项：

  • 函数表达式需先定义后调用
  • 函数名应遵循动词命名规范（如getUserInfo）

2、双击【6-1.JavaScript函数-基础函数.html】后按F12，点击【控制台】可以展示对应函数执行结果

image-20250520144539771

二、带参函数

定义：接收外部传入参数的函数，增强灵活性

特点：

  • 参数按值传递（原始类型传值，对象类型传引用）
  • 支持默认参数值（ES6+）
  • 可接收任意数量参数（通过arguments对象或剩余参数）

示例展示：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为6-2.JavaScript函数-带参函数.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // 基础参数传递
        function showMessage(user, text = "默认消息") {
            console.log(`${user}: ${text}`);
        }

        // 剩余参数示例
        function sum(...numbers) {
            return numbers.reduce((total, num) => total + num, 0);
        }

        showMessage("Alice", "你好"); // Alice: 你好
        showMessage("Bob");          // Bob: 默认消息
        console.log(sum(1,2,3));     // 6
    </script>
</body>
</html>

参数处理技巧：

// 参数解构
function printUser({name, age}) {
    console.log(`${name}（${age}岁）`);
}
printUser({name: "王五", age: 25});

2、双击【6-2.JavaScript函数-带参函数.html】后按F12，点击【控制台】可以展示对应函数执行结果

image-20250520144800999

三、带返回值函数

定义：通过return语句返回处理结果的函数

特点：

  • 函数执行到return即结束
  • 未显式返回时默认返回undefined
  • 可返回任意数据类型（包括函数）

示例展示：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为6-3.JavaScript函数-带返回值函数.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // 返回简单值
        function calcArea(width, height) {
            return width * height;
        }

        // 返回对象
        function createUser(name) {
            return {
                name,
                joinDate: new Date()
            };
        }

        // 返回函数
        function createMultiplier(factor) {
            return function(num) {
                return num * factor;
            };
        }

        console.log(calcArea(5, 3));       // 15
        console.log(createUser("张三"));    // {name: "张三", joinDate: ...}
        const double = createMultiplier(2);
        console.log(double(8));            // 16
    </script>
</body>
</html>

2、双击【6-3.JavaScript函数-带返回值函数.html】后按F12，点击【控制台】可以展示对应函数执行结果

image-20250520144937460

四、变量作用域

定义：变量在代码中的可访问范围

类型：

作用域类型 声明方式 访问范围 特点
全局作用域 无修饰符 整个程序 易污染全局命名空间
函数作用域 var 函数内部 存在变量提升
块级作用域 let/const {}代码块内 避免变量泄露（ES6+）

示例展示：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为6-4.JavaScript函数-变量作用域.html

<!DOCTYPE html>
<html>
<body>
    <script>
        // 全局变量
        const globalVar = "全局可访问";

        function demoScope() {
            // 函数作用域变量
            var functionVar = "函数内访问";

            if(true) {
                // 块级作用域变量
                let blockVar = "块内访问";
                console.log(blockVar);  // 正常
            }
            // console.log(blockVar);    // 报错
        }

        demoScope();
        // console.log(functionVar);     // 报错
        console.log(globalVar);         // 正常
    </script>
</body>
</html>

作用域链机制：

  • 内部函数可访问外部作用域变量（闭包基础）
  • 变量查找从当前作用域逐级向外

2、双击【6-4.JavaScript函数-变量作用域.html】后按F12，点击【控制台】可以展示对应函数执行结果

image-20250520145114100

五、JavaScript捕获HTML事件

定义：通过事件处理函数响应页面交互

绑定方式：

方式 示例 特点
HTML事件属性 <button onclick="handle()"> 简单但混合HTML/JS逻辑
DOM属性绑定 element.onclick = function 覆盖式绑定
addEventListener element.addEventListener() 推荐方式，支持多个监听器

示例展示：

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为6-5.JavaScript函数-捕获HTML事件.html

<!DOCTYPE html>
<html>
<body>
    <!-- 方式1：HTML属性绑定 -->
    <button onclick="alert('直接执行')">按钮1</button>

    <!-- 方式2：DOM属性绑定 -->
    <button id="btn2">按钮2</button>

    <!-- 方式3：事件监听器 -->
    <button id="btn3">按钮3</button>

    <script>
        // 方式2实现
        document.getElementById("btn2").onclick = function() {
            console.log("按钮2被点击");
        };

        // 方式3实现（推荐）
        const btn3 = document.getElementById("btn3");
        btn3.addEventListener("click", function() {
            console.log("首次点击");
        });
        btn3.addEventListener("click", () => {
            console.log("二次点击");
        });
    </script>
</body>
</html>

事件对象应用：

document.getElementById("demo").addEventListener("click", function(event) {
    console.log("事件类型：", event.type);     // click
    console.log("目标元素：", event.target);  // 被点击元素
    event.preventDefault(); // 阻止默认行为
});

2、双击【6-5.JavaScript函数-捕获HTML事件.html】后按F12，点击【控制台】后，依次点击按钮2和按钮3可以展示对应函数执行结果

image-20250520145340269