2.9 函数
我们将程序中反复执行的代码封装到一个代码块中,这个代码块模仿了数学中的函数,具有函数名、参数和返回值。
JavaScript中的函数很灵活,它可以独立存在,作全局函数;也可以在别的函数中,作函数嵌套;也可以在对象中定义。
2.9.1 使用函数
使用函数首先需要定义函数,然后在合适的地方调用该函数,函数的语法格式如下:
function 函数名(参数列表) { 语句组 [return 返回值] }
在JavaScript中定义函数时关键字是function,“函数名”需要符合标识符命名规范;“参数列表”可以有多个并用逗号(,)分隔,极端情况下可以没有参数。
如果函数有值,需要使用return语句将值返回;如果没有返回值,则函数体中可以省略return语句。
函数定义示例代码如下:
function rectangleArea(width, height) { ① var area = width * height; return area; ② } console.log("320×480的长方形的面积:" + rectangleArea(32, 64)); ③
上述代码第①行是定义计算长方形面积的函数rectangleArea,它有两个参数,分别是长方形的宽和高。第②行代码是返回函数计算结果。调用函数的过程是通过代码第③行中的rectangleArea(32,64)语句实现,调用函数时需要指定函数名和参数值。
2.9.2 变量作用域
变量可以定义在函数体外,即全局变量;可以在函数内定义,即局部变量,局部变量作用域是在函数内部有效,如果超出函数体就会失效。
我们看看下面示例代码:
var global = 1; ① function f() { var local = 2; ② global++; ③ return global; } f(); console.log(global); ④ console.log(local); ⑤
上述代码第①行是定义全局变量global,第②行代码是定义局部变量local,local是在函数体内部定义的。第④行代码是打印全局变量global,第⑤行代码是打印局部变量local,该语句在运行时会发生错误,因为local是局部变量,作用域是在f函数体内部。
2.9.3 嵌套函数
在此之前定义的函数都是全局函数,它们定义在全局作用域中,也可以把函数定义在另外的函数体中,称作嵌套函数。
下面看一个示例:
function calculate(opr, a, b) { ① //定义+函数 function add(a, b) { ② return a + b; } //定义-函数 function sub(a, b) { ③ return a - b; } var result; switch (opr) { case "+" : result = add(a, b); ④ break; case "-" : result = sub(a, b); ⑤ } return result; ⑥ } var res1 = calculate("+", 10, 5); ⑦ console.log("10 + 5 = " + res1); var res2 = calculate("-", 10, 5); ⑧ console.log("10 - 5 = " + res2);
上述代码第①行定义calculate函数,它的作用是根据运算符进行数学计算,它的参数opr是运算符,参数a和b是要计算的数值。在calculate函数体内,第②行定义嵌套函数add,对两个参数进行加法运算。第③行定义嵌套函数sub,对两个参数进行减法运算。第④行代码是在运算符为“+”号情况下使用add函数进行计算,并将结果赋值给result。第⑤行代码是在运算符为“-”号情况下使用sub函数进行计算,并将结果赋值给result。第⑥行代码是返回函数变量result。
第⑦行代码调用calculate函数进行加法运算。第⑧行代码调用calculate函数进行减法运算。
程序运行结果:
10 + 5 = 15 10 - 5 = 5
在函数嵌套中,默认情况下嵌套函数的作用域是在外函数体内。
2.9.4 返回函数
我们可以把函数作为另一个函数的返回类型使用。下面看一个示例:
//定义计算长方形面积函数 function rectangleArea(width, height) { var area = width * height; return area; } //定义计算三角形面积函数 function triangleArea(bottom, height) { var area = 0.5 * bottom * height; return area; } function getArea(type) { ① var returnFunction; ② switch (type) { case "rect": //rect 表示长方形 returnFunction = rectangleArea; ③ break; case "tria": //tria 表示三角形 returnFunction = triangleArea; ④ } return returnFunction; ⑤ } //获得计算三角形面积函数 var area = getArea("tria"); ⑥ console.log("底10 高13,三角形面积: " + area(10, 15)); ⑦ //获得计算长方形面积函数 var area = getArea("rect"); ⑧ console.log("宽10 高15,计算长方形面积: " + area(10, 15)); ⑨
上述代码第①行定义函数getArea(type),第②行代码是声明returnFunction变量保存要返回的函数名。第③行代码是在类型type为rect(即长方形)情况下,把前面定义的rectangleArea函数名赋值给returnFunction变量。第④代码是在类型type为tria(即三角形)情况下,把前面定义的triangleArea函数名赋值给returnFunction变量。第⑤代码是将returnFunction变量返回。
第⑥行和⑧行代码是调用函数getArea,返回值area是函数类型。第⑦行和⑨行代码中的area(10,15)是调用函数。
上述代码运行结果如下:
底10高13,三角形面积: 75.0 宽10高15,计算长方形面积: 150.0
此外,还可以采用匿名函数作为返回值。修改上面的示例代码如下:
function getArea(type) { var returnFunction; switch (type) { case "rect": //rect 表示长方形 returnFunction = function rectangleArea(width, height) { ① var area = width * height; return area; }; break; case "tria": //tria 表示三角形 returnFunction = function triangleArea(bottom, height) { ② var area = 0.5 * bottom * height; return area; }; } return returnFunction; } //获得计算三角形面积函数 var area = getArea("tria"); console.log("底10 高13,三角形面积: " + area(10, 15)); //获得计算长方形面积函数 var area = getArea("rect"); console.log("宽10 高15,计算长方形面积: " + area(10, 15));
我们采用匿名函数赋值给returnFunction变量,第①行和第②行代码采用匿名函数表达式。