JavaScript - 函数

函数是一组可重用代码，可以在程序中的任何位置调用。这消除了一次又一次编写相同代码的需要。它可以帮助程序员编写模块化代码。函数允许程序员将大程序划分为许多小的且可管理的函数。

与任何其他高级编程语言一样，JavaScript 也支持使用函数编写模块化代码所需的所有功能。您一定在前面的章节中见过像alert()和write()这样的函数。我们一次又一次地使用这些函数，但它们只用核心 JavaScript 编写过一次。

JavaScript 还允许我们编写自己的函数。本节介绍如何用 JavaScript 编写自己的函数。

功能定义

在使用函数之前，我们需要定义它。在 JavaScript 中定义函数的最常见方法是使用function关键字，后跟唯一的函数名称、参数列表（可能为空）和用大括号括起来的语句块。

句法

基本语法如下所示。

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

例子

尝试以下示例。它定义了一个名为 sayHello 的函数，该函数不带任何参数 -

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

调用函数

要稍后在脚本中的某个位置调用函数，您只需编写该函数的名称，如以下代码所示。

现场演示

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("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 write method and then try...</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>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>

输出

退货声明

JavaScript 函数可以有一个可选的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');
            document.write (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 函数有很多东西需要学习，但是我们在本教程中介绍了最重要的概念。