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>

输出

return语句

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>