JavaScript函数定义与使用详解
本文详细介绍JavaScript中函数的定义方法，包括function关键字、函数表达式及Function构造函数三种语法。重点解析JS函数在参数传递时的灵活性，如形参与实参数量不一致的处理机制，以及通过return关键字实现返回值返回的具体用法。
一、什么是JS的函数
在JavaScript中，函数的概念与Java中的方法类似，用于封装可复用的代码逻辑。
与Java中严格包含访问修饰符、返回值类型、方法名、参数列表及异常列表的方法签名不同，JavaScript定义函数的语法更为简洁。它主要使用function关键字，明确指定函数名和参数列表，但不包含访问修饰符、返回值类型声明或异常处理列表。
二、js函数的定义和调用
JavaScript提供了多种定义函数的方式，以下是常见的几种语法格式。
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>
除了常规声明方式，还可以使用函数表达式来定义函数。
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>
此外，还有一种较少使用的方式，通过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函数的参数传递和返回值
1.参数传递
在调用JS函数时，传入的实际参数个数可以与函数定义中的形式参数个数不一致。
若函数内部需要返回结果，直接使用return关键字即可将值返回给调用者。
当调用函数时传入的参数少于定义时的形参数量，未传入的形参将保持为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>
2.返回值
函数执行完毕后，可以通过return语句返回方法本身作为参数或其他类型的值。
<!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>
到此这篇关于JavaScript函数的使用教程的文章就介绍到这了,更多相关JS函数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18