• JavaScript函数

    目录

    函数

    定义函数的两种方式

    函数自调用

    函数的数据类型

    回调函数

    作用域&块级作用域

    局部变量VS全局变量

    隐式全局变量VS全局变量

    作用域链 

    预解析

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

    函数分两种

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			//命名函数(函数声明)
    10. 			function f1(){
    11. 				console.log('我是命名函数');
    12. 			}
    13. 			
    14. 			//命名函数调用
    15. 			f1();
    16. 			
    17. 			//匿名函数（函数表达式）
    18. 			var f2 =function (){
    19. 				console.log('我是匿名函数');
    20. 			}
    21. 			
    22. 			//匿名函数调用
    23. 			f2();
    24. 			
    25. 		script>
    26. 	body>
    27. html>

    定义函数的两种方式

    函数声明

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

    函数表达式

    var 变量 = 匿名函数 ;

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

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			function f1() {
    10. 				console.log("哈哈哈");
    11. 			}
    12. 			f1();
    13.  
    14. 			function f1() {
    15. 				console.log("你好");
    16. 			}
    17. 			f1();
    18.  
    19. 			//如果在页面中有两个同名的命名函数，后面的一个命名函数会覆盖前面的命名函数
    20.  
    21. 			var f2 = function() {
    22. 				console.log("函数表达式");
    23. 			};
    24. 			f2();
    25. 			var f2 = function() {
    26. 				console.log("函数声明");
    27. 			};
    28. 			f2();
    29. 			//如果在页面中有两个同名的匿名函数，后面的匿名函数不会覆盖前面的匿名函数
    30. 		script>
    31. 	body>
    32. html>

    函数自调用

    声明函数的同时进行调用

    语法：

    1. function 函数名() {
    2. 	//函数体
    3. }
    4. 函数名();
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			//先声明函数
    10. 			function f1(){
    11. 				console.log("先声明函数，再调用");
    12. 			}
    13. 			
    14. 			f1();
    15. 			
    16. 			//声明函数的同时进行调用
    17. 			(function f2(){
    18. 				console.log('声明函数的同时调用函数');
    19. 			})();
    20. 			
    21. 			
    22. 		script>
    23. 	body>
    24. html>

    函数的数据类型

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			function f1(){
    10. 				console.log('qwert');
    11. 			}
    12. 			
    13. 			//输出函数的数据类型
    14. 			console.log(typeof f1);//function
    15. 			
    16. 			var f2 = function (){
    17. 				console.log('asdfg');
    18. 			}
    19. 			
    20. 			console.log(typeof f2);//function
    21. 			
    22. 		script>
    23. 	body>
    24. html>

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			function f1(x,y) {
    10. 				console.log(x+y);
    11. 			}
    12. 			f1(10,20);
    13. 			f1('hello','java');
    14. 			f1('123',123);
    15.  
    16. 			function f3(x) {
    17. 				console.log(x);
    18. 			}
    19. 			f3(true);
    20. 			
    21.  
    22. 		script>
    23. 	body>
    24. html>

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			function f1() {
    10. 				console.log("f1函数调用了");
    11. 				return function() {
    12. 					console.log("我是f1函数里return返回的结果");
    13. 				};
    14. 			}
    15. 			
    16. 			//ff是一个匿名函数
    17. 			var ff=f1();
    18. 			
    19. 			ff();
    20. 		script>
    21. 	body>
    22. html>

    回调函数

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9.  
    10. 			
    11. 			//回调函数:在一个函数中去调用另外一个函数，调用的这个函数是由参数传递过来的
    12. 			function f1(fn){
    13. 				console.log('我是f1函数里的输出语句');
    14. 				fn();	
    15. 			}
    16. 			function f2(){
    17. 				console.log("我是回调函数哦~");
    18. 			}
    19. 			f1(f2);
    20.  
    21.  
    22. 			
    23. 			
    24. 		script>
    25. 	body>
    26. html>

    作用域&块级作用域

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			{
    10. 				var num = 100;
    11. 				console.log(num);
    12. 			}
    13. 			
    14. 			console.log(num);
    15. 			
    16. 			if(true){
    17. 				var num2 =200;
    18. 				console.log(num2);
    19. 			}
    20. 			
    21. 			console.log(num2);
    22. 			
    23. 			for(var i = 1;i<=5;i++){
    24. 				var num3 = 300;
    25. 				console.log(num3);
    26. 			}
    27. 			
    28. 			console.log(num3);
    29. 			
    30. 			function f1(){
    31. 				var num4 = 400;
    32. 				console.log(num4);
    33. 			}
    34. 			
    35. 			f1();
    36. 			
    37. 			//JS没有作用域的概念，但是，函数中定义的变量只能在函数中使用
    38. 			// console.log(num4);
    39. 			
    40. 			function f2(){
    41. 				//没有使用var声明的变量自动升级为全局变量，在函数外也可以使用
    42. 				num5 =500;
    43. 				console.log(num5);
    44. 			}
    45. 			f2();
    46. 			console.log(num5);
    47. 			
    48. 		script>
    49. 	body>
    50. html>

     

    局部变量VS全局变量

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

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

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

    生存期:

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

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

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

    隐式全局变量VS全局变量

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var a1=1;  //全局变量
    10. 			a2=2;        //隐式全局变量
    11. 			delete a1;
    12. 			delete a2;
    13. 			console.log(a1);
    14. 			// console.log(a2);
    15. 			
    16. 			//隐式全局变量是可以被删除的，但是全局变量是不能被删除的
    17.  
    18. 			console.log(typeof a1);//number
    19. 			console.log(typeof a2);//undefined
    20.  
    21. 			
    22. 			
    23. 		script>
    24. 	body>
    25. html>

    作用域链 

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			var num = 10;
    10.  
    11. 			function f1() {
    12. 				// var num = 20;
    13.  
    14. 				function f2() {
    15. 					// var num = 30;
    16.  
    17. 					function f3() {
    18. 						// var num = 50;
    19. 						console.log(num);
    20. 					}
    21. 					f3();
    22. 				}
    23. 				f2();
    24. 			}
    25. 			f1();
    26. 		script>
    27. 	body>
    28. html>

    预解析

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

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

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

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<script>
    9. 			//先声明变量再使用
    10. 			var num =10;
    11. 			console.log(num);
    12. 			
    13. 			console.log(number);//underfined
    14. 			var number = 100;
    15. 			
    16. 			/*
    17. 			console.log(number);
    18. 			var number = 100;
    19. 			等价于：
    20. 			var number;
    21. 			console.log(number);
    22. 			number = 100;
    23. 			*/
    24. 			
    25. 			f1();
    26. 			function f1() {
    27. 				console.log(num);         
    28. 				var num=10;
    29. 			}       
    30.  
    31. 			
    32. 		script>
    33. 	body>
    34. html>

  • 相关阅读:
    教师工作量管理系统思路（链表应用）
    vscode 安装Vue插件
    shell——函数，正则
    kitti2bag 安装出现的各种错误
    如此简单的k8s，快速玩转ingress
    set 模拟与用法
    华为机试真题 C++ 实现【区间交集】
    【Flink源码】JobManager启动流程
    再畅通工程（最小生成树）
    开发人员都需要知道的几款优秀数据库管理工具
  • 原文地址：https://blog.csdn.net/qq_51810428/article/details/126896021