教程 > Javascript 教程 > Javascript 基础 阅读：57

Javascript 函数

函数是一组可重用的代码，可以在程序的任何地方调用。这避免了一次又一次编写相同代码的麻烦。它帮助程序员编写模块化代码。函数允许程序员将一个大程序划分为许多小而易于管理的函数。

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

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

函数定义

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

语法

下面是定义一个函数的基本语法。

<script type = "text/javascript">
   <!--
      function functionname(参数列表) {
         // 语句块
      }
   //-->
</script>

示例

试试下面的例子。它定义了一个名为 sayHello 的函数，不带参数

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

调用函数

要在脚本稍后的某个位置调用函数，只需写上该函数的名称，后面跟上小括号即可，如以下代码所示。

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>点击以下按钮调用 sayHello 函数</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "点击调用">
      </form>      
   </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>      
   </body>
</html>

尝试一下

return 语句

JavaScript 函数可以有一个可选的return语句。如果要从函数返回值，必须使用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');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>点击以下按钮调用函数</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "调用函数">
      </form>       
  </body>
</html>

尝试一下

关于 JavaScript 函数还有有很多东西需要学习，但是我们已经在本教程中介绍了最重要的概念。

查看笔记

扫码一下
查看教程更方便