JavaScript-函数

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

像其他高级编程语言一样，JavaScript也支持使用函数编写模块化代码所需的所有功能。您可能已经看到过像 警报() 和 写() 在早些章节中。我们一遍又一遍地使用这些函数，但它们只在核心JavaScript中被编写了一次。

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

函数定义

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

语法

基本语法如下。

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

例子

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

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("嗨，你好");
      }
   //-->
</script>

调用函数

要在脚本的其他位置调用函数，只需要编写该函数的名称，如下面的代码所示。

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("嗨，你好！");
         }
      </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 + " " + "今年" + age + "岁了。");
         }
      </script>      
   </head>

   <body>
      <p>单击以下按钮调用函数</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>在函数内使用不同的参数，然后尝试…</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>点击以下按钮调用函数</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "调用函数">
      </form>      
      <p>在函数内使用不同的参数，然后尝试...</p>  
  </body>
</html>