javascript中的函数

最新推荐文章于 2022-04-29 22:36:46 发布

原创最新推荐文章于 2022-04-29 22:36:46 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

WEB前端@javascript 专栏收录该内容

31 篇文章

订阅专栏

本文深入探讨JavaScript函数的定义、调用及特殊用法，包括函数覆盖、参数传递机制、动态函数创建等，帮助读者掌握JavaScript函数的高级应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		/*
		javascript中的函数---功能的封装 
			1.入参，如果有，则传入，而且 参数不能使用var定义 
			2.执行结果，可以有返回值，也可以没有返回值，而且不需要定义返回值类型，因为javascript是弱类型语言，返回类型就是var类型  
			
		定义函数
		function  函数名(参数列表) {
			函数体
			return 结果;//如果没有返回值，则省略 return语句
		}
		
		*/
		
		//封装的打印函数
		function sop(data) {
			document.write("<br/>");
			document.write(data);
			document.write("<br/>");
		}
		
		//参数不能使用var定义，直接列出参数即可 
		function add(a,b) {
			return a+b;
		}
		
		var result = add(1,2);
		sop(result);
		
	</script>
	
	<script type="text/javascript">
	
		//函数的细节
		
		//细节一，如果多个函数的函数 名相同，则按书写顺序执行最后的那个函数，前面的函数相当于被 覆盖了
		//下面的执行结果都是 ：new ... show
		show();
		function show() {
			sop("old ... show");
		}
		show();
		function show(x) {
			sop("new ... show");
		}
		show();
		
		
		//细节二： javascript中的函数不存在重载，而且每个函数中都持有一个对象 ，arguments---数组 
		//arguments数组 保存了 调用函数时传入的参数 ，该数组 的长度根据调用者传入的参数个数 决定，与函数的参数列表个数 无关
		//arguments数组中存储元素的顺序与 调用者传入参数的顺序一致 
		function test() {
			sop("空 ");
			sop(arguments.length);
		}
		
		function test(x) {
			sop("x,y");
			sop(arguments.length);
		}
		
		function test(x,y) {
			sop("2 parmas");
			sop(arguments.length);
			sop(x);
			sop(y);
		}
		
		//首先，函数调用与 函数 的形式 参数 无关 ，后面的函数 会 覆盖前面的函数 ，所以调用 test(x,y)
		//然后 ，因为没有传入参数 ，所以 test(x,y)中的参数都是 undefined 
		test();
		
		
		//细节三:函数即对象  函数名相当于该 对象在内存中的引用
		//调用函数必须在后面跟括号才能调用 
		function getSum() {
			return 10;
		}
		
		var sum = getSum;//函数没有执行，而是将函数的地址(对象的引用 )赋值给了另一个变量 
		sop(sum);//输出的是函数的字符串形式  ，相当于调用了一个toString()将函数中的代码进行了打印  
		sop(sum());//相当于调用getSum()
		
		
	</script>
	
	<script type="text/javascript">
		//动态函数---javascript中内置的一个对象Function 
		//参数列表和函数体都是通过字符串指定的，这样就能根据不同情况创建不同的函数 ，实现动态的效果 
		
		var func = new Function("x,y","var sum=x+y; return sum;");
		var sum = func(1,2);
		sop("sum="+sum);
		
		//应用： 通过服务端传回字符串来动态定义函数，与eval()功能 类似 ,都是把字符串转换为javascript命令 
		var params = "a,b,c"; //入参
		var functionBody = "var retVal = a*b*c; return retVal";//函数代码 		
		var funct = new Function(params,functionBody);//根据字符串创建函数 
		var value = funct(2,3,4);//调用函数 
		sop("value="+value);
		
	</script>
	
	<script type="text/javascript">
		//函数的另一种定义方式，左边使用一个变量记录函数对象的引用，右边定义一个匿名函数 
		//如果匿名函数对象没有被事件绑定，或者没有被另外的变量记录其引用，程序会报错 
		
		//定义一个变量来记录匿名函数的引用，后面通过这个变量来操作该匿名函数
		var myFunc = function(x,y) {
			alert("x+y="+(x+y));//这个alert()在 window.unload事件发生 之前弹出 
			document.write("x+y="+(x+y));
			return x+y;
		}
		
		var retVal = myFunc(1,2);
		sop("retVal="+retVal);
		
		//将匿名函数绑定到一个事件上 
		window.onload = function() {
			alert("所有资源都加载完成 ， 脚本都执行完毕 ，unload事件才发生 ！");
		}
	</script>
</head>
<body>

</body>
</html>