JavsScript基础语法02-函数

1. 函数
　　在 JavaScript 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for 循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JavaScript 中的函数。https://www.cqxftyyj.com
　　函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
　　1.1 函数的定义
　　在 JavaScript 中，可以使用 function 语句来定义一个函数。这种形式是由关键字 function、函数名加一组参数以及置于大括号中需要执行的一段代码构成的。使用 function 语句定义函数的基本语法如下：
　　function 函数名([参数1, 参数2,……]){
　　语句
　　[return 返回值]
　　}
　　参数说明：
　　函数名：必选，用于指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写。
　　参数：可选，用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有255个参数。
　　语句：必选，是函数体，用于实现函数功能的语句。
　　返回值：可选，用于返回函数值。返回值可以是任意的表达式、变量或常量。
　　例如，定义一个不带参数的函数 hello()，在函数体中输出 Amo 你好~~~ 字符串。示例代码如下：
　　<script>
　　function hello() {
　　console.log("Amo 你好~~~");
　　}
　　</script>
　　例如，定义一个用于计算商品金额的函数 account()，该函数有两个参数，用于指定单价和数量，返回值为计算后的金额。示例代码如下：
　　<script>
　　function account(price, number) { // 定义有两个参数的函数
　　let sum = price * number; // 计算金额
　　return sum; //返回计算后的金额
　　}
　　</script>
　　常见错误：在同一页面中定义了两个名称相同的函数。例如，下面的代码中定义了两个同名的函数 hello()。
　　<script>
　　function hello() { //定义函数名称为hello
　　document.write("Amo 你好~~~"); //定义函数体
　　}
　　function hello() { //定义同名的函数
　　alert("Amo 你好~~~"); //定义函数体
　　}
　　</script>
　　上述代码中，由于两个函数的名称相同，第一个函数被第二个函数所覆盖，所以第一个函数不会执行，因此在同一页面中定义的函数名称必须唯一。
　　1.2 函数的调用
　　函数定义后并不会自动执行，要执行一个函数需要在特定的位置调用函数。调用函数的过程就像是启动一个机器一样，机器本身是不会自动工作的，只有按下相应的开关来调用这个机器，它才会执行相应的操作。调用函数需要创建调用语句，调用语句包含函数名称、参数具体值。
　　1.2.1 函数的简单调用
　　函数调用的语法如下：
　　函数名(传递给函数的参数1, 传递给函数的参数2, ……);
　　1
　　例如，定义一个函数 outputImage()，这个函数的功能是在页面中输出一张图片，然后通过调用这个函数实现图片的输出，示例代码如下：
　　<script>
　　function outputImage() {
　　document.write("<img src='https://ss3.bdstatic.com/70cFv8Sh_" +
　　"Q1YnxGkpoWK1HF6hhy/it/u=1039034310,233114253&fm=26&gp=0.jpg'/>");
　　}
　　outputImage()
　　</script>
　　运行结果如下图所示。
　　1.2.2 在事件响应中调用函数
　　当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件，在 JavaScript 语言中，将函数与事件相关联就完成了响应事件的过程。比如，按下开关按钮打开电灯就可以看作是一个响应事件的过程，按下开关相当于触发了单击事件，而电灯亮起就相当于执行了相应的函数。
　　例如，当用户单击某个按钮时执行相应的函数，可以使用如下代码实现该功能。
　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>函数</title>
　　</head>
　　<body>
　　<input type="button" value="点我试试" onclick="test();">
　　</body>
　　</html>
　　<script>
　　function test() {
　　alert("Amo 好帅呀~~~");
　　}
　　</script>
　　在上述代码中可以看出，首先定义一个名为 test() 的函数，函数体比较简单，使用 alert() 语句输出一个字符串，最后在按钮 onclick 事件中调用 test() 函数。当用户单击点我试试按钮后将弹出相应对话框。运行结果如下图所示。
　　1.2.3 通过链接调用函数
　　函数除了可以在响应事件中被调用之外，还可以在链接中被调用，在 <a> 标签中的 href 属性中使用 javascript:函数名() 格式来调用函数，当用户单击这个链接时，相关函数将被执行，下面的代码实现了通过链接调用函数。
　　<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　<meta charset="UTF-8">
　　<title>函数</title>
　　</head>
　　<body>
　　<a href="javascript:test();">点我弹弹弹～</a>
　　</body>
　　</html>
　　<script>
　　function test() {
　　alert("Amo 好帅呀~~~");
　　}
　　</script>
　　一般我们可以使用这种方式来阻止 <a> 标签的跳转。示例代码如下：
　　
　　<a href="javascript:void(0)"></a>
　　其它方式，示例代码如下：
　　
　　<a href="#" class="demo"></a>
　　<a href="https://www.baidu.com/" onclick="return false">跳转到百度</a>
　　1.3 函数的参数
　　我们把定义函数时指定的参数称为形式参数，简称形参。而把调用函数时实际传递的值称为实际参数，简称实参。如果把函数比喻成一台生产的机器，那么，运输原材料的通道就可以看作形参，而实际运输的原材料就可以看作是实参。
　　在 JavaScript 中定义函数参数的格式如下：
　　function函数名(形参1，形参2，……){
　　函数体
　　}
　　定义函数时，在函数名后面的圆括号内可以指定一个或多个参数(参数之间用逗号 , 分隔)。指定参数的作用在于，当调用函数时，可以为被调用的函数传递一个或多个值。如果定义的函数有参数，那么调用该函数的语法格式如下：

JavsScript基础语法02-函数

猜你喜欢