JavaScript 函数

函数本质就是逻辑单元。函数是一组作为一个逻辑单元对待的 JavaScript 代码。

使用函数可以使代码更为简洁,提高重用性。程序的绝大部分代码也都包含在各个函数中。

函数的定义

在 JavaScript 中,函数是由

  • 关键字 function
  • 函数名
  • 一组参数 (param)
  • 一段用花括号 {} 括起来的可执行代码

定义的。

						
function functionName([param1, param2, ...]) {
  //statements;
  [return expression;]
}

						
					

说明:

  • functionName: 必需。用于指定函数名。在同一个页面中,函数名必须是唯一的。JavaScript 区分大小写。
  • param: 按需。用于指定参数序列。当需要多个参数时,参数之间使用逗号 param1,param2,... 隔开。一个函数最多可以有 255 个参数。
  • statements: 按需。函数体,用于实现函数功能的语句集合。
  • return expression: 按需。用于返回函数值,其中 expression 可以是表达式、变量或常量。
						
/* 
 * 定义一个名为 account() 的函数
 * 用于计算商品金额:return 金额;
 * 所以要传递 2 个参数:(单价 price, 数量 number)。 
 */
function account(price, number) {
  return price * number;
}		
						
					

函数的调用

函数定义后并不会立即执行,只有当函数被调用后才会执行该函数。

要执行一个函数需要在需要的位置调用该函数,调用函数需要创建调用语句,调用语句由:

  • 函数名
  • (实际参数)

组成。

函数的定义语句通常被放在 HTML 文件的 <head> 当中,函数的调用语句通常出现在 <body> 当中。如果在函数定义之前调用该函数,那么执行将会出错。JavaScript 是解释型语言。

						
<html>
<head>
  <script type="text/javascript">
    function myFunc(param) {
      statement1;
      statement2;
      return expression;
    }
  </script>
</head>
<body>
  <script type="text/javascript>
    myFunc(realParam);
  </script>  
</body>
<html>
						
					

说明:

  • 函数的参数分为 形式参数(形参) 和 实际参数(实参)。
  • 形参为函数赋予的参数,代表函数的位置和类型,系统并不为形参分配相应的存储空间。
  • 调用函数时传递给函数的参数称为实参。实参通常在调用函数之前已经被分配了内存,并且赋予了实际的数据,在函数的执行过程中,实参参与了函数的运行。

在事件响应中调用函数

当用户单击某个按钮或者选中某个复选框时都将触发事件,通过编写程序对事件作出响应的行为称为 响应事件。在 JavaScript 语言中,将 函数调用 与 事件 相关联就完成了响应事件的过程。例如,当用户单击某个按钮时执行相应的函数。

						
<html>
<head>
  <script type="text/javascript">
    function myFunc(param) {
      statement1;
      statement2;
      return expression;
    }
  </script>
</head>
<body>
  <form action="" method="post" name="myForm">
    <input type="button" value="提交" onclick="myFunc(realParam);">
  </form> 
</body>
<html>
						
					

说明:

  • 单击按钮触发 onclick 事件,调用 myFunc() 函数来完成该响应事件。

通过超链接调用函数

函数除了可以在响应事件中被调用之外,还可以在超链接中被调用。

						
<a href="javascript:myFunc(realParam);"点我</a>
						
					

说明:

  • 在 a 元素的 href 属性值中使用 javascript: 关键字作为前缀,可以调用 JavaScript 函数。

函数的参数

						
function 自定义函数名(形参1, 形参2,...) {
  函数体
}
						
					

说明:

  • 定义函数时,在函数名后面的圆括号 () 内可以指定一个或者多个参数(形参),多个参数之间用逗号 , 隔开。
  • 指定参数(形参)的作用在于,当调用函数时,可以为被调用的函数传递一个或者多个值(实参)。
  • 把定义函数时指定的参数称为形式参数,简称形参;把调用函数时实际传递的值称为实际参数,简称实参。

调用函数的语法格式:

						
函数名(实参1, 实参2, ...)
						
					

说明:

  • 通常,在定义函数时使用多少个形参,在调用函数时也必须给出相应的实参。

函数的返回值

有时需要在调用函数后返回一个数值供其他函数使用,可以在函数中添加 return 语句,将需要返回的值赋予变量,最后将此变量返回。

						
<script type="text/javascript">
  function myFunc(param1, param2) {
    var result = somestatement;
    return result;
  }
</script>
						
					

说明:

  • result: 函数中的局部变量。
  • return: 函数中返回变量的关键字。
  • 返回值在函数中不是必须定义的,按需。
  • 程序执行到 return expression; 语句,会将 return 后面表达式 expression 的值返回到函数调用处 myFunc(realParam),作为函数调用表达式的值,也即函数值。
  • 当程序执行到函数体内的 return 语句后,程序执行顺序就会立即跳转到函数调用处,意味着该函数执行终止或完毕,如果函数体内 return 语句后面还有其他代码,将不会被执行。通常 return 语句是函数体内的最后一行代码。

局部变量的作用域只在函数内部,当函数调用完毕,即执行到函数的右花括号 } 处时,局部变量的内存已被释放。因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错。但是如果返回的是局部变量的地址(指针),程序运行后会出错。因为函数只是把指针复制后返回了,但是指针指向的内容已经被释放了,这样指针指向的内容就是不可预料的内容,调用就会出错。准确来说,函数不能通过返回指向栈内存的指针,但是返回指向堆内存的指针是可以的。

						
function myFunc(param) {
  var result = somestatement;    //定义局部变量
  return result;                 //返回局部变量的值
}
						
					

说明:

  • 局部变量 result 存储在栈中,函数返回时会自动复制一份 result 的 copy 给 函数调用表达式 myFunc(realParam),作为该表达式的值,也即函数值。
						
function myFunc(param) {
  static var a = 1;        //局部静态变量
  return a;
}
						
					

说明:

  • 局部静态变量 a 存储在静态(全局)存储区中,从初始化后一直有效直到程序结束,仅分配一次内存,并且函数返回后,变量不会被销毁。

函数的嵌套

函数的嵌套就是在函数内部再定义一个函数。这样定义的优点在于可以使内部函数轻松获得外部函数的参数以及函数的全局变量等。

						
<script type="text/javascript">
  var gVar = 1;
  function myFunc(param1, param2) {
    function myInnerFunc() {
      return (gVar + param1 + param2);
    }
    return myInnerFunc();
  }

  myFunc(2, 3);
</script>
						
					

说明:

  • myFunc: 外部函数名。
  • myInnerFunc: 嵌套函数名。
  • 内部函数 myInnerFunc() 可以获取外部函数的参数、全局变量的值。

函数的递归

函数的递归就是在函数体内调用自身,“我调用我自己”。

使用递归函数要防止程序进入死循环。递归函数只在特定的情况下使用,如处理阶乘问题。

						
<script type="text/javascript">
  function myFunc(param) {
    function myFunc(realParam);
  }
</script>