JavaScript - 函数



在 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!”消息。

Open Compiler
<html> <head> <script type="text/javascript"> function sayHello() { alert("Hello there!"); } </script> </head> <body> <p>Click the following button to call the function</p> <form> <input type="button" onclick="sayHello()" value="Say Hello"> </form> <p> Use different text in the write method and then try... </p> </body> </html>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

函数参数

到目前为止,我们已经看到了没有参数的函数。但是,在调用函数时,可以使用不同的参数。这些传递的参数可以在函数内部捕获,并且可以对这些参数进行任何操作。函数可以采用多个参数,用逗号隔开。

示例

尝试以下示例。我们在这里修改了 sayHello 函数。现在它接受两个参数。

Open Compiler
<html> <head> <script type = "text/javascript"> function sayHello(name, age) { document.write (name + " is " + age + " years old."); } </script> </head> <body> <p>Click the following button to call the function</p> <form> <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello"> </form> <p>Use different parameters inside the function and then try...</p> </body> </html>

return 语句

JavaScript 函数可以包含可选的 return 语句。如果您想从函数返回一个值,则需要此语句。此语句应为函数中的最后一条语句。

例如,您可以将两个数字传递给函数,然后您可以期望函数在调用程序中返回它们的乘积。

示例

下面的代码定义了一个函数,该函数连接两个参数,然后在调用程序中返回结果。此外,您还可以查看它如何使用 return 语句返回值。

Open Compiler
<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>Click the following button to call the function</p> <form> <input type="button" onclick="secondFunction()" value="Call Function"> </form> <p>Use different parameters inside the function and then try...</p> </body> </html>

函数作为变量值

在 JavaScript 中,函数可以像其他变量一样使用。这就是为什么说 JavaScript 具有头等函数。函数可以作为参数传递给其他函数。

示例

在下面的示例中,我们使用函数表达式声明了一个函数,并使用该函数与其他字符串进行连接。

Open Compiler
<html> <body> <div id = "output"> </div> <script> const myFunc = function (){ return "Hello ";}; document.getElementById("output").innerHTML = myFunc() + "Users."; </script> </body> </html>

我们在单独的章节中介绍了两个重要的概念。

广告