JavaScript 脚本语言允许开发者通过编写函数的方式组合一些可重复使用的脚本代码块,增加了脚本代码的结构化和模块化。函数是通过参数接口进行数据传递,以实现特定的功能。本小节将重点介绍函数的基本概念、组成、全局函数与局部函数、作为对象的函数以及递归函数等知识,让读者从头开始,学习如何编写执行效率高、代码利用率高,且易于查看和维护的函数。
2.9.1 函数的基本组成
函数由函数定义和函数调用两部分组成,应首先定义函数,然后再进行调用,以养成良好的编程习惯。
函数的定义应使用关键字 function,其语法规则如下:
function funcName ([parameters])
{
statements;
[return 表达式;]
}
函数的各部分含义如下:
funcName 为函数名,函数名可由开发者自行定义,与变量的命名规则基本相同;
parameters 为函数的参数,在调用目标函数时,需将实际数据传递给参数列表以完成函数特定的功能。参数列中可定义一个或多个参数,各参数之间加逗号“,”分隔开来,当然,参数列表也可为空;
statements 是函数体,规定了函数的功能,本质上相当于一个脚本程序;
return 指定函数的返回值,为可选参数。
自定义函数一般放置在 HTML 文档的<head>和</head>标记对之间。除了自定义函数外,JavaScript 脚本语言提供大量的内建函数,无需开发者定义即可直接调用,例如window 对象的alert()方法即为JavaScript 脚本语言支持的内建函数。
函数定义过程结束后,可在文档中任意位置调用该函数。引用目标函数时,只需在函数名后加上小括号即可。若目标函数需引入参数,则需在小括号内添加传递参数。如果函数有返回值,可将最终结果赋值给一个自定义的变量并用关键字return 返回。
考察如下测试代码:
//源程序2.18
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Sample Page!</title>
<script language="JavaScript" type="text/javascript">
<!--
var msg="\n 函数调用实例 : \n\n";
//响应按钮的onclick 事件处理程序
function Test()
{
var i=10;
var j=15;
var temp=sum(i,j);
msg+="函数参数 : \n";
msg+="参数1: i="+i+"\n";
msg+="参数2: j="+j+"\n";
msg+="调用语句 : \n";
msg+="var temp=sum(i,j); \n";
msg+="返回结果 : \n";
msg+=""+i+"+"+j+" = "+temp+"\n";
alert(msg);
}
//计算两个数的加和
function sum(data1,data2)
{
var tempData=data1+data2;
return tempData;
}
-->
</script>
</head>
<body>
<center>
<form>
<input type=button value="测试" onclick="Test()">
</form>
</center>
</body>
</html>
程序运行后,在原始页面单击“测试”按钮,弹出警告框如图2.30 所示。
图 2.30 函数调用
上述代码中,定义了实现两数加和的函数 sum(data1,data2)及响应“测试”按钮onclick事件处理程序的Test()函数,并在后者内部调用了window 对象的内建函数alert(),实现了函数的相互引用。
如果函数中引用的外部函数较多或函数的功能很复杂,势必导致函数代码过长而降低脚本代码可读性,违反了开发者使用函数实现特定功能的初衷。因此,在编写函数时,应尽量保持函数功能的单一性,使脚本代码结构清晰、简单易懂。