组团学
学习方向
登录/注册

ECMAScript函数

阅读 (398)

一、函数概述

  • 认识函数

    概念：在一个完整的项目中，某些功能会被反复使用。那么会将某段代码封装成函数，当我们要使用功能的时候直接调用函数即可

    本质：函数是对功能的封装

    优点：

    ​ 简化代码结构，增加代码的复用度(重复使用的程度)

    ​ 如果想修改或调试某一功能时，只需修改对应的函数即可

  • 定义函数

    格式

    function 函数名(参数列表) {
    语句
    return 表达式;
}

    说明

    部位 解释说明
    function 函数代码块以 function 关键词开头
    函数名 遵循标识符的规则
    () 参数列表的开始和结束
    参数列表 任何传入参数和自变量必须放在圆括号中间，圆括号之间可以用于定义参数。函数从函数的调用者获得的信息，可以没有参数
    {} 函数体的开始和结束
    语句 函数封装的功能
    return 一般用于结束函数，并返回给函数的调用者一些信息，"表达式"即为要返回的数据。不带表达式的return相当于返回 undefined

    注意：在仅仅只定义之后是不会被执行的，只是说明有了一个能完成该功能的函数，还没有被使用

  • 调用函数

    格式：函数名(参数列表)

    注意：调用函数时该函数必须已经定义

    本质：实参给形参赋值的过程

    说明：

    部位 解释说明
    函数名 要使用某个功能函数的名字
    () 参数列表的开始和结束
    参数列表 调用者给函数的信息(实参)

二、最简单的函数(无参无返回值)

编写函数，实现在控制台上打印"sunck is a good man!"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>最简单的函数(无参无返回值)</title>
</head>
<body>
	<script type="text/javascript">
		//函数的调用，可以写在函数声明之前或之后
		myConsole();
		
		//函数的声明
		function myConsole() {
			console.log("sunck is a good man!");
		}

		//函数的调用
		myConsole();
	</script>
</body>
</html>

三、函数的参数

编写函数，给函数一个人的姓名、年龄等信息，打印 %s is a good man!He is %d years old！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的参数</title>
</head>
<body>
	<script type="text/javascript">
		// 形式参数(形参)：变量
		// 参数的数量理论上是无限的，但是实际上最好不要超过6、7个，类型是没有限制
		function func(name, age) {
			console.log("%s is a good man!He is %d years old!",name,age);
		}

		// 在函数调用时，需要给函数按顺序传递数据，数据要对应
		// 实际参数(实参)：值
		func("sunck", 18)
	</script>
</body>
</html>

对于已经传进来的参数js是来者不拒的，但是多余的部分会被默默的忽略掉，其实是被arguments接收，后期会讲解

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的参数</title>
</head>
<body>
	<script type="text/javascript">
		// 形式参数(形参)：变量
		// 参数的数量理论上是无限的，但是实际上最好不要超过6、7个，类型是没有限制
		function func(name, age) {
			console.log("%s is a good man!He is %d years old!",name,age);
		}

		// 在函数调用时，需要给函数按顺序传递数据，数据要对应
		// 实际参数(实参)：值
		func("sunck", 18, 180, 80)
	</script>
</body>
</html>

四、函数的返回值

编写函数，实现计算两个数的和

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的返回值</title>
</head>
<body>
	<script type="text/javascript">
		
		function func(x, y) {
			sum = x + y
			// 注意：在定义的函数体中，尽量不要出现console
			// console.log("ret = %d",sum)
			return sum
		}

		// func(1, 2)
		// 返回值返回到了函数调用的地方
		// ret接收了mySum函数运算后的返回值
		ret = func(1, 2)
		console.log("ret = %d",ret)
		// 以后会根据函数的返回值进行判断
	</script>
</body>
</html>

五、变量作用域

  • 概念

    变量可以使用的范围，程序的变量并不是哪个位置都可以访问的，访问的权限决定于变量时在哪里定义的

  • 作用域的划分

    局部变量：在某个函数中定义的变量，仅在该函数内部可以使用

    全局变量：定义在所有函数之外的变量

  • 注意

    js中变量的定义并不是以代码块为作用域的，而是以函数作为作用域的

  • 变量查找的规则

    首先在自身作用域中查找有没有同名变量，找不到的话依次向上级作用域中查找，不会向低级作用域中查找

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量作用域</title>
</head>
<body>
	<script type="text/javascript">
		var num1 = 10;

		if (1){
		    var num2 = 20;
		 	console.log("1-----num1 = %d", num1);
		 	num1 = 11
		}

		console.log("1-----num2 = %d", num2);
		console.log("2-----num1 = %d", num1);

		function func() {
		 	console.log("2-----num2 = %d", num2);
		 	console.log("3-----num1 = %d", num1);

		 	var num3 = 30;
		 	//声明一个变量时没有使用var语句，该变量就会被默认为全局的
		 	num4 = 40;

		 	//函数内部可以向访问自己的局部变量那样访问全局变量
		 	num1 = 12
		}
		func();

		// console.log("1-----num3 = %d", num3);//访问不到函数中的局部变量
		console.log("1-----num4 = %d", num4)
		console.log("4-----num1 = %d", num1);
	</script>
</body>
</html>

六、变量提升

js在执行过程进入新函数时，这个函数内被声明的所有变量都会被移动到函数最开始的地方，叫做变量的提升

注意：仅仅提升变量的声明，不会提升赋值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量提升</title>
</head>
<body>
	<script type="text/javascript">
		var num = 1;

		function f() {
			//此时没有使用到外部全局变量num，而是使用的局部num，打印的值是undefined，因为存在变量提升
			console.log("1---num = " + num);

			var num = 2;
			//此时打印的值是2，因为函数域始终优先全局域，所以函数内定义的num会覆盖掉所有与它同名的全局变量。
			console.log("2---num = " + num);
		}
		f();

		// 下面代码类似上面代码
		/*
		var num = 1;
		function f() {
			var num;
			console.log("1---num = " + num);
			num = 2;
			console.log("2---num = " + num);
		}
		f();
		*/
	</script>
</body>
</html>

七、函数也是一种数据

函数实际上也是一种数据，我们可以把一个函数赋值给一个变量，在通过变量访问函数，也可以当做参数传递

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数也是一种数据</title>
</head>
<body>
	<script type="text/javascript">
		function mySum(num1, num2) {
			return num1 + num2;
		}

		//将函数赋值给变量
		var sum = mySum;

		//通过变量执行函数
		var a = sum(1,2);
		console.log("a = " + a);
	</script>
</body>
</html>

八、匿名函数

即没有名字的函数，特别上当它不被赋值给变量单独使用时，可以有两种优雅的用法

  • 可以将匿名函数作为参数传递给其他函数
  • 定义匿名函数完成某些一次性任务
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>匿名函数</title>
</head>
<body>
	<script type="text/javascript">
		var f = function(a){
			console.log("a = " + a);
		};
		f(123);

		
		function fun(num1, num2, fc) {
			return fc(num1, num2);
		}
		var num = fun(1,2,function(a,b){
			return a + b;
		});
		console.log("num = " + num);
	</script>
</body>
</html>

九、即时函数

说明：可以在定义后立即调用

实现：将匿名函数的定义放进一对小括号中，然后外面再紧跟一对小括号即可。最后的小括号起到的是"立即执行"的作用，同时它也是向匿名函数传递参数的地方

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>即时函数</title>
</head>
<body>
	<script type="text/javascript">
		(function(a){
			console.log("a = " + a);
		})("sunck is a good man!");
	</script>
</body>
</html>
需要 登录 才可以提问哦
头像
：
回复