JavaScript 中的函数是一组可重用的代码,可以在程序中的任何地方被调用。这消除了重复编写相同代码的需要。它帮助程序员编写模块化的代码。函数允许程序员将大型程序划分为多个小的且易于管理的函数。
像其他高级编程语言一样,JavaScript 也支持使用函数来编写模块化代码所需的所有特性。在前面的章节中,您可能已经见过 alert()
和 write()
这样的函数。我们在不断地使用这些函数,但实际上它们只在核心 JavaScript 中被写了一次。
JavaScript 允许我们编写自己的函数。本节将解释如何在 JavaScript 中编写您自己的函数。
函数定义
在使用函数之前,我们需要定义它。在 JavaScript 中定义函数最常见的方式是使用 function
关键字,后跟一个唯一的函数名、一个参数列表(可能是空的),以及由大括号包围的语句块。
所有需要在函数调用时执行的语句必须写在大括号内。
语法
在 JavaScript 中定义函数的基本语法如下:
function functionName(parameter-list) {
statements
}
这种类型的函数定义被称为函数声明或函数语句。我们也可以使用函数表达式来定义函数。我们将在下一章详细介绍函数表达式。
下面的示例定义了一个名为 sayHello
的函数,该函数没有参数:
function sayHello() {
alert("Hello there");
}
函数表达式
JavaScript 中的函数表达式允许您将函数定义为一个表达式。函数表达式类似于匿名函数声明。函数表达式可以赋值给一个变量。
JavaScript 中函数表达式的语法如下:
const varName = function (parameter-list) {
statements
};
在下面的示例中,我们使用函数表达式定义了一个 JavaScript 函数,并将其赋值给变量 myFunc
:
const myFunc = function (x, y){
return x + y;
};
调用函数
要在脚本中的某个位置调用函数,只需写出该函数的名称并带上圆括号 ()
,如下面的代码所示:
示例
下面的代码在输出中显示了一个按钮。当您点击该按钮时,它将执行 sayHello()
函数。sayHello()
函数会在输出中打印 “Hello there!” 消息。
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello there!");
}
</script>
</head>
<body>
<p>点击下列按钮以调用函数</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello">
</form>
<p> 使用不同的文本在 write 方法中然后尝试... </p>
</body>
</html>
函数参数
到目前为止,我们已经看到了没有参数的函数。但是,在调用函数时可以传递不同的参数。这些传递的参数可以在函数内部被捕获,并且可以在这些参数上执行任何操作。一个函数可以接受由逗号分隔的多个参数。
示例
尝试下面的示例。我们修改了 sayHello
函数。现在它接受两个参数。
<html>
<head>
<script type="text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>点击下列按钮以调用函数</p>
<form>
<input type="button" onclick="sayHello('Zara', 7)" value="Say Hello">
</form>
<p>在函数中使用不同的参数然后尝试...</p>
</body>
</html>
return
语句
JavaScript 函数可以有一个可选的 return
语句。如果您希望从函数返回一个值,这是必需的。该语句应该是函数中的最后一条语句。
例如,您可以将两个数字传递给一个函数,然后期望该函数返回它们的乘积。
示例
下面的代码定义了一个函数,该函数在返回结果前连接两个参数。此外,您可以看到它是如何使用 return
语句返回值的。
<html>
<head>
<script type="text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Zara ', 'Ali');
alert(result);
}
</script>
</head>
<body>
<p>点击下列按钮以调用函数</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
<p>在函数中使用不同的参数然后尝试...</p>
</body>
</html>
函数作为变量值
在 JavaScript 中,函数可以像其他变量一样使用。这就是为什么说 JavaScript 支持一等函数。函数可以作为参数传递给其他函数。
示例
在下面的示例中,我们使用函数表达式声明了一个函数,并使用该函数与其他字符串连接。
<html>
<body>
<div id="output"> </div>
<script>
const myFunc = function (){ return "Hello ";}
document.getElementById("output").innerHTML = myFunc() + "Users.";
</script>
</body>
</html>
我们已经在单独的章节中涵盖了两个重要的概念: