JavaScript自定义函数用法及使用例 function 形参实参函数体调用

我大受震撼

已于 2023-12-25 10:35:49 修改

阅读量3.5k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html5

于 2022-03-08 06:45:00 首次发布

本文链接：https://blog.csdn.net/m0_58875335/article/details/123342806

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.了解函数定义方法

仅介绍两种主流方法：

1.表达式

var  函数名 = function(形参){
    函数体
}

使用例：

var lookProgram = function (num1,num2){
    var sum = num1 + num2;
    console.log(sum);
}

lookProgram(5,3)

//最终输出结果是8

2.声明

function 函数名(形参){
    函数体
}

使用例：

function lookProgram(num1,num2){
    var sum = num1 + num2;
    console.log(sum);
}

lookProgram(5,3)

//最终输出结果是8

2.调用自定义函数

注：本文仅使用声明函数的方式举例。

首先是对形参与实参概念的抽象化理解：将形参抽象为“变量”，实参即为要赋给此“变量”的值，形参也和“变量”一样由程序员取名。

形参理论上可以无限多，两个形参中用逗号隔开，实参数量应当与形参相同。

对无形参函数的调用：

function printTen(){//无形参
    var i = 9 + 1;
    console.log(i);
}


printTen();//直接进行调用

对有形参函数的调用：

function printSum(num1,num2){//有形参，
    var sum = num1 + num2;
    console.log(sum);
}


printSum(5,8);//输入实参进行调用
//最终输出结果为13

更多自定义函数示例：

		function getStar(c1,c2){
			var e;
			e = c1 * c2;
			document.write(e);
			document.write('<br/>');
		}//乘法函数
		
		function fangP(a1,a2){
			var e;
			e = a1 + a2;
			document.write(e);
			document.write('<br/>');
		}//加法函数
		
		function kanSp(b1,b2){
			var e;
			e = b1 - b2;
			document.write(e);
			document.write('<br/>');
		}//减法函数
		
		getStar(8,5);
		fangP(5,9);
		kanSp(8,2);

//输出分别为：getStar 40;fangP 14;kanSp 6;

3.对自定义函数的进一步了解

自定义函数有极大的自由性，函数体可以是任意语句，甚至可以是另一个函数，不过在函数内的函数或声明的变量都是局部函数|变量，也就是无法在函数外使用，但全局变量可以在任何局部中使用
任何函数，不调用就不会执行
当函数配合触发条件时，可以有更多的用法，而不是上述例子中的直接进行调用或根本不执行

例如：用document.getElementById配合<input>（表单）实现对密码输入格式的简单判断。

代码及分析如下：

	<script>
		function cPwd(){
			var opwd1 = document.getElementById('wer');
/*document.getElementById用来读取输入在密码框内的字符，意为 从ID获取*/
			var opwd2 = document.getElementById('wer2');
//wer1,wer2对应input中的两个密码框id
			if(wer.value == ''||wer2.value == ''){
//判断是否为控
				alert('密码不能为空');
				return;
//在此处用于停止语句执行
			}
			if (wer.value == wer2.value) {
//判断是否相同
				alert('两次密码一样');
			} else{
				alert('两次密码不一样');
//不同即弹出此警示框内容
			}
			
		}
		
		
	</script>

	<body>
	<form>
		<input type="password" name="" id="wer" value="" />
<!--//id是wer,wer2的两个密码框-->
		<input type="password" name="" id="wer2" value="" />
		<input type="button" value="确定" onclick="cPwd()" />
<!--//使用鼠标点击事件调用函数cPwd-->
	</form>
	</body>

4.总结：

自定义函数用于将一个需要重复使用的语句或函数，某功能等作为函数体，以调用的方法使用。
如果不进行调用，函数不会执行，不会有任何效果。
在函数内的皆为此函数的局部变量。
形参与实参互相对应，就像“变量与被赋予变量的值”。
自定义函数用处极大，前提是灵活使用且理解其用法。

附：基于自定义函数的单功能计算器

	<script type="text/javascript">
		
		function Out(){
			var inum1 = document.getElementById(num1);
			var inum2 = document.getElementById(num2);
			var sum = Number(num1.value) + Number(num2.value);
			
			if(num1.value == ''||num2.value == ''){
				alert('不能为空');
				return;	
			}
			else{
			alert(sum);
			}
			
		}
		
		
	</script>
	<body>
		<form>
		<p>加法计算器，请分别输入两个加数</p>
		<p><input type="text" style="width:60px;"  name="" id="num1" value="" />
		+
		<input type="text" style="width:60px;" name="" id="num2" value="" />
		=
        <input type="button" value="计算结果" onclick="Out()" />
		</p>
		</form>
	</body>

通过更改运算符可以做出其它单功能计算器