JavaScript函数

import java.lx

已于 2022-09-16 20:37:05 修改

阅读量685

点赞数 3

文章标签： javascript 前端开发语言学习 html

于 2022-09-16 20:36:19 首次发布

本文链接：https://blog.csdn.net/qq_51810428/article/details/126896021

版权

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数分两种

命名函数（函数声明）：如果函数有名字，就是命名函数

匿名函数（函数表达式）：如果函数没有名字，就是匿名函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//命名函数(函数声明)
			function f1(){
				console.log('我是命名函数');
			}
			
			//命名函数调用
			f1();
			
			//匿名函数（函数表达式）
			var f2 =function (){
				console.log('我是匿名函数');
			}
			
			//匿名函数调用
			f2();
			
		</script>
	</body>
</html>

定义函数的两种方式

函数声明

function 函数名 () {  //函数体  }

函数表达式

var 变量 = 匿名函数 ;

把一个函数给一个变量，此时形成了函数表达式

函数声明和函数表达式二者区别：

在页面中有两个同名的命名函数，后面的一个命名函数会覆盖前面的命名函数

在页面中有两个同名的匿名函数，后面的匿名函数不会覆盖前面的匿名函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function f1() {
				console.log("哈哈哈");
			}
			f1();

			function f1() {
				console.log("你好");
			}
			f1();

			//如果在页面中有两个同名的命名函数，后面的一个命名函数会覆盖前面的命名函数

			var f2 = function() {
				console.log("函数表达式");
			};
			f2();
			var f2 = function() {
				console.log("函数声明");
			};
			f2();
			//如果在页面中有两个同名的匿名函数，后面的匿名函数不会覆盖前面的匿名函数
		</script>
	</body>
</html>

函数自调用

声明函数的同时进行调用

语法：

function 函数名() {
	//函数体
}
函数名();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//先声明函数
			function f1(){
				console.log("先声明函数，再调用");
			}
			
			f1();
			
			//声明函数的同时进行调用
			(function f2(){
				console.log('声明函数的同时调用函数');
			})();
			
			
		</script>
	</body>
</html>

函数的数据类型

函数是有数据类型，它的数据类型是：function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function f1(){
				console.log('qwert');
			}
			
			//输出函数的数据类型
			console.log(typeof f1);//function
			
			var f2 = function (){
				console.log('asdfg');
			}
			
			console.log(typeof f2);//function
			
		</script>
	</body>
</html>

任何数据类型都可以作为参数,函数也可以叫做回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function f1(x,y) {
				console.log(x+y);
			}
			f1(10,20);
			f1('hello','java');
			f1('123',123);

			function f3(x) {
				console.log(x);
			}
			f3(true);
			

		</script>
	</body>
</html>

任何数据类型都可以作为返回值,函数也可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function f1() {
				console.log("f1函数调用了");
				return function() {
					console.log("我是f1函数里return返回的结果");
				};
			}
			
			//ff是一个匿名函数
			var ff=f1();
			
			ff();
		</script>
	</body>
</html>

回调函数

函数A作为参数传递到另一个函数B中，并且这个函数B执行函数A。就说函数A叫做回调函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>

			
			//回调函数:在一个函数中去调用另外一个函数，调用的这个函数是由参数传递过来的
			function f1(fn){
				console.log('我是f1函数里的输出语句');
				fn();	
			}
			function f2(){
				console.log("我是回调函数哦~");
			}
			f1(f2);


			
			
		</script>
	</body>
</html>

作用域&块级作用域

作用域：作用域就是在这一个区域内有作用（使用范围）

块级作用域：一对大括号就可以看成是一块

JS中没有块级作用域，但是函数除外

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			{
				var num = 100;
				console.log(num);
			}
			
			console.log(num);
			
			if(true){
				var num2 =200;
				console.log(num2);
			}
			
			console.log(num2);
			
			for(var i = 1;i<=5;i++){
				var num3 = 300;
				console.log(num3);
			}
			
			console.log(num3);
			
			function f1(){
				var num4 = 400;
				console.log(num4);
			}
			
			f1();
			
			//JS没有作用域的概念，但是，函数中定义的变量只能在函数中使用
			// console.log(num4);
			
			function f2(){
				//没有使用var声明的变量自动升级为全局变量，在函数外也可以使用
				num5 =500;
				console.log(num5);
			}
			f2();
			console.log(num5);
			
		</script>
	</body>
</html>

局部变量VS全局变量

全局变量：在函数外声明的变量，网页上的所有脚本和函数都能访问它

局部变量：在函数内部声明的变量（使用var），只能在函数内部访问它

可以在不同的函数中使用名称相同的局部变量

生存期:

局部变量在函数运行以后被删除

全局变量在页面关闭后被删除

全局变量和局部变量区别：作用域不同、声明位置不同、生存期不同

隐式全局变量VS全局变量

隐式全局变量:声明变量时没有使用声明变量的关键字

隐式全局变量是可以被删除的，但是全局变量是不能被删除的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var a1=1;  //全局变量
			a2=2;        //隐式全局变量
			delete a1;
			delete a2;
			console.log(a1);
			// console.log(a2);
			
			//隐式全局变量是可以被删除的，但是全局变量是不能被删除的

			console.log(typeof a1);//number
			console.log(typeof a2);//undefined

			
			
		</script>
	</body>
</html>

作用域链

沿着作用域链一级一级地搜索的过程。搜索过程始终从作用域链底端开始，然后逐级向上回溯，直到找到为止（如果找不到，通常会报错）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var num = 10;

			function f1() {
				// var num = 20;

				function f2() {
					// var num = 30;

					function f3() {
						// var num = 50;
						console.log(num);
					}
					f3();
				}
				f2();
			}
			f1();
		</script>
	</body>
</html>

预解析

预解析就是预先解析function和var

变量的声明提前了----提前到当前所在的作用域的最上面

函数的声明也会被提前---提前到当前所在的作用域的最上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//先声明变量再使用
			var num =10;
			console.log(num);
			
			console.log(number);//underfined
			var number = 100;
			
			/*
			console.log(number);
			var number = 100;
			等价于：
			var number;
			console.log(number);
			number = 100;
			*/
			
			f1();
			function f1() {
				console.log(num);         
				var num=10;
			}       

			
		</script>
	</body>
</html>