第四章 Javascript 函数
函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用，向函数传递参数之后，函数可以返回一定的值。这里要注意的是JavaScript中的函数也是一个对象，使用typeof检查一个函数对象时，会返回function。
4.1 函数的定义
在Javascript中，函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。基本语法：
function functionNeme([parameter 1,parameter 2,...]){
statements;
[return expression;]
}
参数说明：
functionName：必选项，用于指定函数名。保持唯一且区分大小写。
parameter：可选项，用于指定参数列表。当有多个参数时，用逗号隔开，一个函数最多可有255个参数。
statement：必选项，用于指定函数体。即实现函数功能的代码块。
expression：可选项，用于返回函数值。可为任意表达式/变量或常量。
例如，定义一个用于计算商品金额的函数account()，返回值为计算后的商品金额。
function account(price, num) {
var sum = price * num; // 计算金额
return sum; // 返回值
}
4.2 函数的调用
函数定义后并不会自动执行，要执行一个函数，需要在特定的位置调用语句，调用语句包含名称、参数具体值等。
4.2.1 函数的简单调用
函数的定义语句通常被放在HTML文件的段中，而函数的调用语句通常被放在段中。如果在函数定义之前调用函数，执行将会报错。
函数的定义及调用实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
function account(price, num) { // 定义函数
var sum = price * num; // 计算金额
alert(sum); // 输出结果
}
</script>
</head>
<body>
<script type="text/javascript">
account(20, 100); // 调用函数
</script>
</body>
</html>
执行结果：
函数的参数分为形式参数（形参）和实际参数（实参）。其中形式参数为函数赋予的参数，代表函数的位置和类型，系统并不为形参分配相应的存储空间。调用函数时传递给函数的参数称为实际参数，实参通常在调用函数之前已经被分配了内存，并且赋予了实际的数据。在函数的执行过程中，实际参数参与了函数的运行。上述示例中的price、num即为形参。
4.2.2 在事件响应中调用函数
当用户单击某个按钮或选中某个复选框时将触发事件，编写程序对事件做出反应的行为称为响应事件。在Javascript中，将函数与事件相关联，就完成了响应事件的过程。
例如，当用户单击某个按钮时，执行相应的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
function test() { // 定义函数
alert("test") // 返回值
}
</script>
</head>
<body>
<form action="" method="get" name="from1">
<input type="button" value="提交" onclick="test();">
<!--在按钮事件触发时，调用函数-->
</form>
</body>
</html>
执行结果：
4.2.3 通过超链接调用函数
在<a>标签中的href属性中使用”javascript:函数名()“格式来调用函数，当用户单击该超链接时，相关函数将会被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
function test() { // 定义函数
alert("test") // 返回值
}
</script>
</head>
<body>
<a href="javascript:test();">Alexhesz</a>
</body>
</html>
执行结果：
4.3 嵌套函数
所谓嵌套函数，即在函数内部再定义一个函数。这样定义的优点在于可以使内部函数轻松获得外部函数的参数以及函数的全局变量等。嵌套函数再JavaScript中非常强大，但使用时需要当心，因为他会使程序可读性降低。
语法格式：
<script type="text/javascript">
var outter = 10;
function functionName([parameter 1,parameter 2,...]){
function innerFunction(){
somestatements;
}
}
</script>
参数说明：
functionName：外部函数名称；
innerFunction：嵌套函数名称。
实例，在嵌套函数中获取全局变量以及外部函数参数的和。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
var num = 10; // 定义全局变量
function add(num1, num2) { // 定义外部函数
function innerAdd() { // 定义内部函数
alert("参数和为：" + (num1 + num2 + num));
}
return innerAdd();
}
</script>
</head>
<body>
<script type="text/javascript">
add(10, 10) // 调用函数
</script>
</body>
</html>
执行结果：
4.4 归递函数
所谓归递函数就是函数在自身的函数体内调用自身。使用归递函数时一定要当心，处理不当将会使陈鼓型进入死循环。归递函数可以用来处理一些特殊情况，如处理阶乘问题等。
语法格式：
<script type=“text/javascript”>
var outter = 10;
function funtionName(parameter 1){
functionName(parameter 2)
}
</script>
实例：归递函数的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
function f(num) { // 定义归递函数
if (num <= 1) {
return 1;
} else {
return f(num - 1) * num;
}
}
</script>
</head>
<body>
<script type="text/javascript">
alert("5!的结果是：" + f(5)) // 调用函数 输出
</script>
</body>
</html>
执行结果：
在定义归递函数时需要两个必要条件：
- 包括一个结束归递条件。如实例中的“
if(num<1)”语句，如果满足条件则执行“return 1;” 语句，不再归递。 - 包括一个归递调用语句。如实例中的“
return f(num-1)*num;”语句，用于实现调用归递函数。
4.5 JavaScript中的内置函数
4.5.1 parseInt()函数
该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。
语法：
parseInt(StringNum,[n])
StringNum：需要转换为整型的字符串。
n：提供在2～36之间的数字表示所保存数字的进制数。这个参数在函数中不是必须的。
4.5.2 parseFloat()函数
该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。
语法：
parseFloat(StringNum)
StringNum：需要转换为浮点型的字符串。
4.5.3 isNaN()函数
该函数主要用于检验某个值是否为NaN。
语法：
isNaN(Num)
Num：需要验证的数字。
说明：如果参数Num为NaN，函数返回值为true；如果参数Num不是NaN，函数返回值为false。
4.5.4 isFinite()函数
该函数主要用于检验某个表达式是否为无穷大。
语法：
isFinite(Num)
Num：需要验证的数字。
说明：如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。
4.5.5 encodeURI()函数
该函数主要用于返回一个URI字符串编码后的结果。
语法：
encodeURI(url)
url：需要转化为网络资源地址的字符串。
说明：URI与URL都可以表示网络资源地址，URI比URL的表示范围更加广泛，但在一般情况下，URI与URL可以是等同的。encodeURI()函数只对字符串中有意义的字符进行转义。例如将字符串中的空格转化为“%20”。
4.5.6 decodeURI()函数
该函数主要用于将已编码为URI的字符串解码成最初的字符串并返回。
语法：
decodeURI(url)
url：需要解码的网络资源地址。
说明：此函数可以将使用encodeURI()转码的网络资源地址转化为字符串并返回，即decodeURI()函数是encodeURI()函数的逆向操作。
4.6 Function()构造函数与函数直接量
除了可使用基本的function语句定义函数之外，还可以使用Function()函数和函数直接量来定义函数。这两者存在很重要的区别。
- 构造函数Function()允许在运行时动态创建和编译JavaScript代码，而函数直接量却是程序结构的一个静态部分，就像函数语句一样。
- 每次调用构造函数Function()时都会解析函数体，并且创建一个新的函数对象。如果对构造函数的调用出现在一个循环中，或者出现在一个经常被调用的函数中，这种方法的效率将非常低。而函数直接量不论出现在循环体还是嵌套函数中，既不会在每次调用时都被重新编译，也不会在每次遇到时都创建一个新的函数对象。
- Function()创建的函数使用的不是静态作用域。相反的，该函数总是被当作顶级函数来编译。
例.通过自定义函数实现屏蔽鼠标和键盘相关事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<script type="text/javascript">
function maskingKeyboard() { // 定义函数
if (event.KeyCode == 8) { // 判断是否为Backspace键
event.KeyCode = 0;
event.returnValue = false;
alert("当前网页不允许使用Backspace键！！！");
}
if (event.KeyCode == 13) { // 判断是否为Enter键
event.KeyCode = 0;
event.returnValue = false;
alert("当前网页不允许使用Enter键！！！");
}
if (event.KeyCode == 116) { // 判断是否为F5键
event.KeyCode = 0;
event.returnValue = false;
alert("当前网页不允许使用F5键！！！");
}
// 判断是否为Alt+方向键方向键<——或方向键——>
if ((event.altKey) && ((window.KeyCode == 37) || (window.event.KeyCode == 39))) {
event.returnValue = false;
alert("当前网页不允许使用Alt+方向键方向键<——或方向键——>");
}
if ((event.ctrlKey) && (event.KeyCode == 78)) { // 判断是否为Ctrl+N键
event.returnValue = false;
alert("当前网页不允许使用Ctrl+N新建窗口！！！");
}
if ((event.shiftKey) && (event.KeyCode == 121)) { // 判断是否为Shift+F10键
event.returnValue = false;
alert("当前网页不允许使用Shift+F10键！！！");
}
}
</script>
</head>
<body onkeydown="maskingKeyboard()">
<!--调用函数maskingKeyboard()-->
<p>曾经沧海难为水，</p>
<p>除却巫山不是云。</p>
</body>
</html>