【JavaScript】函数 ① ( 函数引入 | 函数声明 | 函数调用 )

韩曙亮

发布于 2024-04-02 09:58:15

1000

发布于 2024-04-02 09:58:15

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、JavaScript 函数

1、函数引入

JavaScript 代码编写时 , 会遇到定义大量相同或相似代码的场景 , 这些代码可能需要重复使用 , 这种情况下就需要将这些代码定义在函数中 ;

JavaScript 函数是一段可以重复使用的代码块 ,

" 函数 " 可以接受若干输入参数 , 在函数体中进行计算或执行操作，并返回返回值 ;

借助函数可以组织和重用代码 , 使代码更加清晰和易于维护 ;

函数的目的就是重复使用代码 ;

使用函数就是声明函数和调用函数 ;

2、函数声明

在 JavaScript 中 , 使用 function 关键字声明函数 ;

函数定义语法格式 :

// 声明 JavaScript 函数
function functionName(parameter1, parameter2, ...) {  
  // 函数体：执行的代码块  
}

functionName 是函数的函数名 ;
parameter1, parameter2, ... 是传递给函数的形式参数列表 , 这些形式参数在函数体代码中可与作为局部变量使用 ;

代码示例 :

        // 声明函数
        function hello(name) {
            console.log(`Hello, ${name}!`);
        }

在上述代码中 , 声明了一个名为 hello 的函数 , 该函数接受一个参数 name , 在函数体中使用 console.log 在浏览器命令行中打印出 Hello, ${name}! 字符串 ;

3、函数调用

函数声明后 , 本身不会自动执行函数体中的代码 , 只有调用函数后 , 才会执行函数体代码 ;

函数调用语法格式 :

functionName(argument1, argument2, ...);

functionName 是要调用函数的函数名 ;
argument1, argument2, ... 是传递给函数的实参列表 , 该实参列表与函数定义的形参列表一一对应 , 这些实际参数值值将替换函数定义中的形式参数 , 并在函数执行时作为函数体的局部变量使用 ;

4、代码示例 - 函数声明调用

在下面的代码中 , 定义了 hello 函数 , 传入 name 形参 , 在函数体中 , 该形参可以作为局部变量使用 ;

调用 hello() 函数时 , 传入实参 'Tom' 字符串 , 在函数体中会向浏览器控制台打印 Hello , Tom! 字符串 ;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 函数使用

        // 声明函数
        function hello(name) {
            console.log(`Hello, ${name}!`);
        }

        // 调用函数
        hello('Tom');
    </script>
</head>

<body>
</body>

</html>

执行结果 :