JavaScript-3.1-JavaScript 函数-函数的声明与调用

最新推荐文章于 2023-11-14 17:27:03 发布

anh_qwh

最新推荐文章于 2023-11-14 17:27:03 发布

阅读量561

点赞数

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/102615979

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

JavaScript-3.1-JavaScript 函数-函数的声明与调用

函数的声明与调用

函数的声明与调用

函数的主要作用是将程序中需要重复使用的代码进行封装，从而可以使代码重复使用
函数的使用
- 声明
- 调用

一：函数的声明

在 JavaScript 中，函数使用 function 关键字进行声明
参数可以理解为函数内部需要使用的变量，这个变量可以在外部调用函数时传入函数中，从而可以在函数中使用

1、有参函数

有参函数是指声明函数时，可以在函数体的圆括号中声明多个变量，提供给函数内部中使用

function 函数名(参数1,参数2,......){
	// 函数体
	return 结果;
}

注意
1.函数必须使用 function 关键字声明，函数名后面的()用于放参数列表，这个参数列表被称为形参列表
2.函数可以有返回值，表示调用函数时可以接收一个返回的结果

2、无参函数

无参函数不需要指定形参列表，函数名后面的()不能省略

function 函数名(){
	// 函数体
	return 结果;
}

二：函数的调用

封装起来的函数不能直接使用执行，而是需要手动调用函数，才能够执行函数中的代码

1、直接调用

声明好一个函数后，可以在 JavaScript 中直接使用“函数名()”调用
有参函数，需要通过()将参数的值传入函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript 函数</title>
</head>
<body>
	<script type="text/javascript">
		function add(num1,num2){
			var sum = num1 + num2;
			return sum;
		}
		/*
		调用有参函数
		3，5将分别赋给函数的两个形参，num1 和 num2
		*/
		a = add(3,5);
		document.write("有参函数："+a+"<br>");
		/*
		调用无参函数
		无参函数不需要传递实参列表，但是()一定不能省略
		*/
		b = add();
		document.write("无参函数："+b);
	</script>
</body>
</html>

效果图
在这里插入图片描述

注意
1.函数后面的()用于放参数列表，这个参数列表被称为形参列表----变量
2.调用函数时传入参数列表的值称为实参列表----变量的值
3.实参列表与形参列表的个数没有任何关联
4.有形参不一定传入实参，而传入实参也不一定必须声明形参

2、事件调用

给按钮添加 onclick 属性，表示当触发 onclick 事件（单击按钮）时调用函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript 函数</title>
</head>
<body>
	<script type="text/javascript">
		function add(num1,num2){
			var sum = num1 + num2;
			document.write(sum);
			return sum;
		}
	</script>
	// 事件调用
	<button onclick="add(5,5)">点我调用方法</button>
</body>
</html>

效果动态图

在这里插入图片描述

三：函数的作用域

函数声明的变量只有函数内部使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的作用域</title>
</head>
<body>
	<script type="text/javascript">
		// 在函数外，无论是否使用 var 声明变量，都是全局变量
		var a = 1;
		b = 1;
		
		function func(){
			// 在函数内，使用 var 声明的变量为局部变量，只有函数内部使用
			var c = 1;
			// 在函数内，不用 var 声明的变量为全局变量
			d = 1;
			console.log(a); // 函数中可以使用全局变量
			console.log(b); // 函数中可以使用全局变量
			console.log(c); // 函数中可以使用自身的局部变量
			console.log(d); // 函数中可以使用全局变量
		}
		// 调用函数
		func();

		console.log(a); // 函数外可以使用全局变量
		console.log(b); // 函数外可以使用全局变量
		console.log(c); // 函数外不能使用函数的局部变量
		console.log(d); // 函数外可以使用全局变量
	</script>
</body>
</html>

效果图
在这里插入图片描述

结论
1.在函数外，无论是否使用 var 声明变量，都是局部变量，在整个 JavaScript 文件可用
2.在函数内，使用 var 声明的变量为局部变量，只在当前函数可用
3.在函数内，不用 var 声明的变量依然为全局变量，在整个 JavaScript 文件可用
4.在 JavaScript 中，函数内部能够使用全局变量，函数外部不能使用局部变量

四：函数声明和调用的注意事项

1、函数的命名规范

函数名只能由字母、数字、下划线和$组成，且开头不能是数字
函数名对大小写敏感，使用时需注意区分大小写
函数名的声明必须符合小驼峰法或者下划线命名法
- 小驼峰法则：变量首字母为小写，之后每个单词首字母大写
- 下划线命名法：变量所有字母都小写，单词之间用下划线分隔

2、形参列表和实参列表

声明函数时的参数列表，称为“形参列表”（变量的名）
调用函数时的参数列表，称为“实参列表”（变量的值）

<script type="text/javascript">
		// 形参列表
		function add(num1,num2){
			var sum = num1 + num2;
			return sum;
		}
		// 实参列表
		add(3,5);
	</script>

3、函数形参与实参的个数并无直接关联

声明函数的形参列表与调用函数的实参列表没有直接关联关系
在函数中，实际有效的参数取决于实参的赋值，未被赋值的形参为 Undefined

<script type="text/javascript">
	// 形参列表个数>实参列表个数，num3的值为 Undefined
	function func1(num1,num2,num3){
	// 函数内容
	}
	func1(1,2)

	// 实参列表个数>实参列表个数，多余的实参将存储在 arguments 对象中
	function func2(num1){
		// 函数内容
	}
	func2(1,2,3)		
</script>

4、函数如果需要返回值，可用 return 返回结果

函数可以有返回值，也可以没有返回值
调用函数时，使用 var 变量名=函数名() 的方式接收返回结果
如果函数没有返回值，则接收的结果为 Undefined

5、函数声明与函数调用没有先后之分

函数的声明和函数的调用语句没有先后顺序之分
- 函数调用语句可以写在函数声明之前

anh_qwh

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-3.1-JavaScript 函数-函数的声明与调用

JavaScript-3.0-JavaScript 函数-函数的声明与调用函数的声明与调用一：函数的声明1、有参函数2、无参函数二：函数的调用三：函数的作用域四：函数声明和调用的注意事项五：函数声明与函数调用没有先后之分函数的声明与调用函数的主要作用是将程序中需要重复使用的代码进行封装，从而可以使代码重复使用函数的使用声明调用一：函数的声明在 JavaScript 中，函...
复制链接

扫一扫