前端路线--JavaScript篇（day05）-CFANZ编程社区

函数封装的意义

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		var a = 10;
		var b = 20;
		var c = 30;
		var d = 40;

		console.log(a+b)
		console.log(b+c)
		console.log(c+d)
		console.log(a+d)

		// 函数：function 来声明函数
		function fun1(num1,num2){
			console.log(num1+num2);
		}

		fun1(a,b);
		fun1(a,c);
		fun1(a,d);

		// 函数：就是把一段代码封装起来。然后调用
		// 目的：节约开发时间，不出现重复代码
	</script>
</body>
</html>

创建函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// function:声明函数
		// ():参数
		// {}:添加逻辑代码

		// 1、使用字面量的形式创建函数
		function fun1() {
			console.log('创建函数');
		}
		//通过函数名调用函数
		fun1();

		// 2、使用函数表达式声明函数(匿名函数)
		var fun2 = function(){
			console.log('匿名函数');
		}
		// 调用函数
		fun2();

		// 3、使用Function构造函数来创建函数(用的较少)
		var fun3 = new Function('num1','num2','console.log("构造函数");console.log(num1+num2);');
		fun3(10,20);

		// 4、自执行函数：自己执行，不需要调用
		(function(num1,num2){
			console.log('自执行函数');
			console.log(num1+num2);
		})(12,13);

		// 创建函数出现的几个条件：function、形参、实参、逻辑代码
	</script>
</body>
</html>

函数的返回值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		function fun1(num1,num2){
			console.log(num1*num2)
		}
		
		var rel = fun1(3,4);

		console.log(rel)  //undefined 函数默认没有返回值

		// return：返回函数的执行结果，函数的返回值
		function fun2(num1,num2){
			return num1*num2;
		}
		console.log(fun2(5,6));  //30

		// return:
		// 1- 函数在执行完return语句之后会立即停止并且退出
		// 2- 一个函数中可以有多个return语句。有流程控制语句，最终选择一个return结果返回
		// 3- return语句也可以不带任何返回值。直接结束函数
	</script>
</body>
</html>

函数的参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 实参:就是传递的实际参数
		// 形参:就是代替实参在函数体内运行
		function fun1(a,b,c){
			console.log(a)
			console.log(b)
			console.log(c)

			// 伪数组-arguments对象：接收所有的实参
			console.log(arguments);
			console.log(arguments[6]);
			console.log(arguments[10]);   //undefined
			console.log(arguments.length);   //7
		}
		// fun1(1,2,3)
		
		fun1(1,2,3,4,5,6,7);
	</script>
</body>
</html>

函数作为参数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 函数是一种数据类型  function

		function fun1(){
			console.log('我是函数');
		}

		function fun2(){
			console.log('我是函数2');
		}

		// 把函数fun1当做实参传递给了superfun
		function superfun(yyy){
			yyy();
			console.log('执行了');
		}
		superfun(fun1);
		superfun(fun2);
	</script>
</body>
</html>

函数作为返回值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 1、函数的返回值
		function fun1(){
			return 100;
		}
		console.log(fun1());

		// 2、函数作为返回值
		function fun2(){
			var num = 100;
			console.log('我是一层')
			return function(){
				console.log(num*2);
				console.log('我是二层')
				return num+2;
			}
		}
		// console.log(fun2()());
		fun2()()

		var rel = fun2()();
		console.log(rel)

		function fun3(){
			console.log('我是函数3');
			return function(){
				console.log('我是函数3内层');
				return 999;
			}
		}
		fun3();
		console.log(fun3());

		fun3()();
		console.log(fun3()());

		// 3、自执行函数作为返回值
		function fun4(){
			var num1 = 10;
			var num2 = 20;
			return (function(a,b){
				console.log(a+b);
				return 100;
			})(num1,num2);
		}
		fun4()
		console.log(fun4())
	</script>
</body>
</html>

作用域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 作用域：全局作用域和局部作用域(局部作用域=函数作用域)
		// 全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
		// 全局变量创建方式：1、直接创建的变量 2、在函数内部不加var
		// 全局变量在网页关闭时销毁

		var anum = 100;   //全局变量在任何地方都可以访问

		// 局部作用域(函数作用域)
		// 函数中固定的代码才能被访问
		function fun1(){
			var aaa = '局部变量';
			console.log(aaa);
			console.log(anum);
			abbb = 200;
		}
		fun1();

		// 局部作用域并不相通
		function fun2(){
			// console.log(aaa);
		}
		fun2();

		// console.log(aaa);
		// 1、局部作用域中，可以访问全局变量和局部变量
		// 2、在全局作用域下，不能访问局部变量
		// 3、在函数体内、没有加var关键字声明的变量也是全局变量

		console.log(abbb);
		console.log(window);
	</script>
</body>
</html>

作用域链

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 在我们当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，那么这个查找的过程所形成的链条就叫做作用域链
		var a = 10;

		function fun1(){
			var a = 20;
			function fun2(){
				var a = 30;
				console.log(a);
			}
			fun2();
		}
		fun1();
	</script>
</body>
</html>