JavaScript 函数定义与参数返回值详解

林见深

发布时间：2026-10-15| 3人浏览过

原创

JavaScript 函数的定义与调用是前端开发的基石。本文通过代码实例梳理了函数声明、变量赋值等三种定义方式，解析实参与形参匹配规则及 return 返回值的运用，帮助初学者建立清晰的函数概念。

JS 函数的核心概念

在 JavaScript 中，函数类似于 Java 中的方法，但语法更加精简。JS 函数以 function 关键字为核心，具备函数名和参数列表，但不需要访问修饰符、返回值类型声明或异常处理列表。

JS 函数的定义方式

第1步：使用 function 关键字定义

目的：掌握最常见且推荐的函数声明语法。

操作说明：采用 function 函数名(参数列表){JS代码} 的结构。浏览器会先进行“函数提升”，因此无论代码位置如何，均可直接调用该函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// 定义函数
			function fun1() {
				alert("hello JavaScript");
			}
			// 调用函数
			fun1()
		</script>
	</head>
	<body>
	</body>
</html>

第2步：将匿名函数赋值给变量

目的：了解变量作用域下的函数定义方式。

操作说明：语法为 var 函数名=function(参数列表){JS代码}。这种写法定义的函数属于变量赋值，不存在函数提升现象，必须在定义之后才能调用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 匿名函数赋值
			var fun2=function(){
				alert("hello JavaScript")
			}
			fun2()
		</script>
	</head>
	<body>
	</body>
</html>

第3步：理解 Function 构造函数

目的：了解不常用的动态创建函数的方式。

操作说明：通过 var 函数名=new Function('js代码') 创建。这种方式灵活性高但性能较差，且在现代开发中极少使用，仅作了解。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var fun3=new Function("alert('hello javascript')")
			fun3()
		</script>
	</head>
	<body>
	</body>
</html>

参数传递与返回值

参数传递机制

JS 函数在接收参数时具有极大的包容性，主要表现如下：

个数不一致：实际传入的参数（实参）可以与定义的参数（形参）个数不同。
缺少参数：若实参少于形参，缺失的形参自动赋值为 undefined。
多余参数：若实参多于形参，多出的部分将被忽略，不影响函数执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun(a,b,c){
				alert("a:"+a)
				alert("b:"+b)
				alert("c:"+c)
			}
			// 正常传参
			fun(10,20,30)
		</script>
	</head>
	<body>
	</body>
</html>

返回值 (return)

当函数内部执行到 return 关键字时，程序会立即停止并返回指定的值给调用者。如果未指定返回值或没有 return 语句，函数默认返回 undefined。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun2 (a,b) {
				var c = a+b;
				return c; // 返回计算结果
			}
			var x = fun2(10,20) // 获取返回值
			alert("c="+x)
		</script>
	</head>
	<body>
	</body>
</html>