4.3 函数
在JavaScript中，函数是程序的重要组成部分。函数是拥有名称的一组语句，可以通过该名称来调用函数并向它传递一些参数，当函数执行完毕后还可以向调用代码返回一个值。使用函数可以封装在程序中多次用到的一组语句，以便简化应用程序结构，并使程序代码更容易维护。
4.3.1 定义函数
在JavaScript中，使用function语句定义一个函数。语法如下：
function functionName([arg1,arg2,...,argN]){
statements
return [expr];
}
其中functionName为函数名，其命名规则与变量名基本相同。由于函数通常用于实现某种操作，因此建议以大小写混合形式使用多个名词，并以动词开头。例如，applyColor、createTable等。在JavaScript中，函数名是区分大小写的。
arg1...argN是函数的参数列表，各个参数之间用逗号分开，这些参数称为形式参数。一个函数最多可以拥有256个参数。
statements是用于实现函数功能的一个或多个语句，称为函数体。函数体也可以为空。
return语句从当前函数退出并返回一个值。若省略expr或没有在函数内执行return语句，则把undefined值赋给调用当前函数的表达式。
4.3.2 调用函数
定义一个函数后，可以通过以下语法格式来调用它：
functionName([arg1,arg2,...,argN])
其中functionName表示函数名，该函数必须已经定义。arg1...argN给出要传递给函数的参数，这些参数称为实际参数。
调用函数时，应注意以下几点。
● 如果函数有返回值，则可以通过赋值语句把函数值赋给一个变量，或把函数值作为表达式的一个部分。
● 由于函数名是区分大小写的，因此调用函数时应注意函数名的大小写。
● 如果在调用函数时传递了参数，则可以在函数内部使用这些参数的值，如同使用局部变量的值一样。即使未向函数传递参数，函数名后面的圆括号也不可以省略。
● 在函数内部，可以使用在函数外部声明的全局变量。不过，如果在定义函数时声明了同名的形式参数，或者在函数内部声明了同名的局部变量，则全局变量将被屏蔽。
例4-10 定义和调用函数示例。以不同字体、字号和颜色显示文本信息，网页运行结果如图4-12所示。
图4-12 定义和调用函数示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-10.html，把网页标题设置为“定义和调用函数示例”。
2 切换到代码视图，在</title>标记下方创建一个JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function displayText(text,fontName,fontSize,color){
var string;
string="<div align=\"center\"";
string+="style=\"font-family:'"+fontName+"'";
string+=";font-size:"+fontSize;
string+=";color:"+color+"\">";
string+=text+"</div>";
document.write(string);
}
</script>
3 在<body>标记下方创建一个JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
displayText("技术凝聚实力·专业创新出版","宋体","16pt","red");
displayText("Adobe Dreamweaver CS3","Arial Black","14pt","blue");
displayText("Ajax 网页设计","华文隶书","38pt","magenta");
</script>
4 在浏览器中查看网页的运行结果。
4.3.3 arguments对象
使用function语句定义一个函数时，可以在函数体内部使用关键字arguments为当前执行的函数返回一个arguments对象。语法如下：
functionName.arguments
其中functionName是当前执行函数的名称，也可以省略不写。
通过arguments属性，函数可以处理可变数量的参数。arguments对象的length属性包含了传递给函数的参数的数目。对于arguments对象所包含的参数，其访问方法与数组元素的访问方法相同。例如，可以用arguments[0]获取第一个参数的内容。此外，还可以通过arguments对象的callee属性获取对当前正在执行的函数的引用。
图4-13 arguments对象应用示例
通过arguments对象可以定义参数数目不定的函数。当定义这种类型的函数时，可以不指定形式参数，在函数体内通过arguments对象检查参数的个数，并获取所传递的各个参数的值。下面结合例子加以说明。
例4-11 arguments对象应用示例。本例说明如何定义和调用参数个数不定的函数，用于计算一些数字的和，或者把一些字符串连接起来，如图4-13所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-11.html，把网页标题设置为“arguments对象应用示例”。
2 切换到代码视图，在</title>标记下方创建一个JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function SumOrConcat(){ // 定义SumOrConcat函数
var argsLength=arguments.length; // 求出参数的个数
var result=0; // 声明变量并赋初值
// 若第一个参数为字符串，则设置为空字符串
if(typeof (arguments[0])=="string")result="";
// 用for循环计算各个参数的和或连接这些参数
for(var i=0;i<argsLength;i++){
result+=arguments[i];
}
return result; // 设置函数的返回值
}
</script>
3 在<body>标记下方创建一个JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
document.write("<p>10+18+22+56+79+98 = "+
SumOrConcat(10,18,22,56,79,98)+"</p>");
document.write("<p>\"Dreamweaver CS3 \"+\"Ajax \"+\"网页设计\" = ",
SumOrConcat("Dreamweaver CS3 ","Ajax ","网页设计")+"</p>");
document.write("<p>1.5+3.6+8.8+15.08 = "+
SumOrConcat(1.5,3.6,8.8,15.08)+"</p>");
</script>
4 在浏览器中查看网页的运行结果。
4.3.4 匿名函数
在JavaScript中，可以使用new运算符和Function构造函数来创建一个匿名函数，并将该函数的引用赋予一个变量。语法如下：
var func=new Function("arg1",... ,"argN","statement1;...,statementN;");
其中arg1～argN给出函数的参数；statement1～statementN给出函数要执行的语句（即函数体）。
例如：
var func=new Function("text","document.write(text);");
// 由于变量func中保存了函数的引用
// 因此可以通过该变量来调用匿名函数
func("Hello World!");
在上述例子中，向Function构造函数传递了两个参数，第一个参数给出要定义的函数的参数，第二个参数则给出该函数的函数体。在这里，函数体实际上是Function构造函数的一个字符串参数，这意味着可以在运行时构造任意函数，也可以使用function语句创建一个匿名函数，并将该函数的引用赋予一个变量，然后通过该变量来调用匿名函数。例如：
var func=function(msg){
alert(msg);
} ;
func( " Hello World ！ " ) ;
例4-12 定义和调用匿名函数示例。在本例中分别定义了两个匿名函数并通过变量名调用它们，网页运行结果如图4-14所示。
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-12.html，把网页标题设置为“匿名函数应用示例”。
2 切换到代码视图，在<body>标记下方创建一个JavaScript脚本块，源代码如下：
图4-14 匿名函数应用示例
<script language="javascript" type="text/javascript">
var func=new Function(x,y){ // 定义一个匿名函数
var z;
z=x+y;
return z;
};
document.write("<p>此时，变量func指向第一个匿名函数：<br />");
document.write("20+30 = "+func(20,30)+"</p>");
var func=Function("x","y","var z;z=x＊y;return z;");
document.write("<p>现在，变量func指向第二个匿名函数：<br />");
document.write("20×30 = "+func(20,30)+"</p>");
</script>
3 在浏览器中查看网页运行结果。
4.3.5 嵌套函数
前面讨论了如何使用function语句或new Function来定义函数。通过这种方式定义的函数在全局范围内有效，即函数对其他脚本可见并可用，这种函数称为全局函数。
实际上，定义函数时可以在函数体内包含各种各样的语句，甚至可以嵌套另一个函数的定义，称为嵌套函数。使用嵌套函数可以把一个函数的可见性封装在另一个函数中，使得内部函数作为外层全局函数的私有函数，即内部函数只能在外层全局函数内部调用。
定义嵌套函数的语法框架如下：
function outFunc(){ // 定义全局函数
statements;
function innerFunc1(){ // 定义一个嵌套函数
statements;
}
function innerFunc2(){ // 定义另一个嵌套函数
statements;
}
statements;
}
定义一个函数时，如果需要在函数体内多次执行一些语句，但又不希望把这些语句定义为一个全局函数时，则可以考虑把这些语句定义为一个嵌套函数。
在内部函数中，可以访问外层函数中声明的变量和参数，但在外部函数中不能访问在内部函数中声明的变量和参数。
例4-13 定义和调用内部函数示例。网页运行结果如图4-15所示。
图4-15 定义和调用内部函数示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-13.html，把网页标题设置为“内部函数应用示例”。
2 切换到代码视图，创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function outerFunc(username){
function insideFunc1(){ // 定义一个内部函数
document.write("<p>"+username+"用户，欢迎你！</p>");
}
function insideFunc2(){ // 定义另一个内部函数
document.write("<p><font color=\"red\">需要输入用户名。</font></p>");
}
if(username!=""){
insideFunc1();
}else{
insideFunc2();
}
}
outerFunc("");
outerFunc("郭靖");
</script>
3 在浏览器中查看网页运行结果。
4.3.6 函数作为参数
调用一个函数时，可以通过参数向该函数传递一些数据。函数的参数既可以是各种简单数据类型，也可以是引用数据类型，包括对象的引用或函数的引用。下面结合例子说明如何以函数作为函数的参数。
例4-14 使用函数作为参数示例。网页运行结果如图4-16所示。
图4-16 使用函数作为参数
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-14.html，把网页标题设置为“以函数作为参数”。
2 切换到代码视图，创建JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
function showText(handle,msg,color){
var string=handle(msg,color);
document.write(string);
}
function showDiv(text,color){
var string="<div><font color=\""+color+"\">"+text+"</div>";
return string;
}
function showParagraph(text,color){
var string="<p><font color=\""+color+"\">"+text+"</p>";
return string;
}
showText(showDiv,"这是一个Div标记。","blue");
showText(showDiv,"这是另一个Div标记。","black");
showText(showParagraph,"这是一个文本段落。","red");
showText(showParagraph,"这是另一个文本段落。","green");
</script>
3 在浏览器中查看网页运行结果。
4.3.7 内置函数
为了便于开发人员编程，JavaScript语言提供许多内置函数，可以在脚本代码中直接使用这些函数，以实现所需要的操作功能。下面介绍一些比较常用的JavaScript内置函数。
（1）escape函数。返回一个使用ISO Latin-1字符集的参数的十六进制编码，用于创建附加到URL的字符串。语法如下：
escape(charstring)
其中charstring参数是要编码的字符串。
escape函数返回一个包含了charstring内容的新字符串（Unicode格式），所有空格、标点、重音符号及其他非ASCII字符都用“%xx”编码代替，其中xx等于表示该字符的十六进制数。例如，空格返回的是“%20”。字符值大于255的用“%uxxxx”格式存储。
（2）eval函数。对JavaScript代码求值然后执行之，语法如下：
eval(codestring)
其中codestring参数是包含有效JavaScript代码的字符串，这个字符串将由JavaScript引擎进行分析和执行。
eval函数允许JavaScript源代码的动态执行。例如，下面的代码创建了一个新变量z：
eval("var z=2+3;");
（3）parseFloat函数。解析一个字符串参数并返回一个浮点数，语法如下：
parseFloat(numstring)
其中numstring参数是包含浮点数的字符串。
parseFloat函数方法返回与numstring中保存的数相等的数字表示。如果numstring的前缀不能解释为浮点数，则返回NaN。
例如：
parseFloat("abc") // 返回NaN
parseFloat("1.2abc") // 返回1.2
在JavaScript脚本中，可以用isNaN函数检测NaN。
（4）parseInt函数。解析一个字符串参数并返回一个整数，语法如下：
parseInt(numstring,[radix])
其中numstring参数指定要转换为数字的字符串；radix为可选项，取值为整数，其范围为2～36，表示numstring所保存数字的进制的值。若没有提供，则前缀为0x的字符串被当做十六进制的，前缀为0的字符串被当做八进制的，所有其他字符串都被当做是十进制的。
parseInt函数返回与保存在numstring中的数字值相等的整数。若numstring的前缀不能解释为整数，则返回NaN。
parseInt("abc") // 返回NaN
parseInt("12abc") // 返回12
parseInt("1011",2) // 返回11
parseInt("67",8) // 返回55
parseInt("ff",16) // 返回255
（5）unescape函数。对用escape函数编码的字符串进行解码，语法如下：
unescape(charstring)
其中charstring参数是要解码的字符串。
unescape函数返回保存了charstring内容的新字符串。所有以“%xx”十六进制形式编码的字符都用与ASCII字符集中等价的字符代替。以“%uxxxx”格式编码的字符用十六进制编码xxxx的Unicode字符代替。
例4-15 全局函数应用示例。在网页的段落中定义三个变量，通过JavaScript对该段落进行编码、解码并执行段落中的代码，网页运行结果如图4-17所示。
图4-17 全局函数应用示例
设计步骤
1 在Dreamweaver中打开Ajax站点，在chap04文件夹中创建一个HTML网页并保存为page4-15.html，把网页标题设置为“全局函数应用示例”。
2 在页面上创建一个段落，将其id设置为p1，字体大小设置为9.5pt，段落的文本内容如下：
var x=3,y=6;var z=3＊x+y/2;// 声明三个变量并进行初始化
3 切换到代码视图，在元素p1下方创建一个JavaScript脚本块，源代码如下：
<script language="javascript" type="text/javascript">
var p1=document.getElementById("p1"); // 引用段落p1
document.write("<p>元素p1中的字体大小：");
document.write(parseFloat(p1.style.fontSize)+"pt</p>"); // 把字体大小转换为浮点数
encoding=escape(p1.innerText) // 对段落文本编码
document.write("<p>对元素p1中的文本进行编码：<br />");
document.write(encoding+"</p>");
document.write("<p>对编码后的字符串进行解码：<br />");
document.write(unescape(encoding)+"</p>"); // 对编码后的字符串进行解码
eval(p1.innerText) // 执行段落中的代码
document.write("<p>对元素p1的文本解析并加以执行后：");
document.write("z="+z+"</p>");
</script>
4 在浏览器中查看网页的运行结果。