![HTML5 APP开发从入门到精通(微课精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/420/31794420/b_31794420.jpg)
3.6 函数
JavaScript是函数式编程语言,在JavaScript脚本中随处可以看到函数,函数构成了JavaScript源代码的主体。
3.6.1 定义函数
定义函数的方法有以下两种。
使用function语句声明函数。
通过Function对象来构造函数。
使用function语句定义函数有以下两种方式:
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_40902.jpg?sign=1739277947-bXwXad0fc9aF4W5kZM8sAlMh7iOUs3wD-0-2e06d0c85f619d868fc0e543e2eb2721)
命名函数的方法也被称为声明式函数,而匿名函数的方法则被称为引用式函数或者函数表达式,即把函数看作一个复杂的表达式,并把表达式赋予变量。
使用Function对象构造函数的语法如下:
var function_name = new Function(arg1, arg2, ..., argN, function_body)
在上面的语法形式中,每个arg都是一个函数参数,最后一个参数是函数主体(要执行的代码)。Function的所有参数必须是字符串。
【示例1】本示例通过Function构造函数定义了一个自定义函数,该函数包含两个参数。函数主体部分使用document.write()方法把两个参数包裹在<h1>标签中输出,显示效果如图3.9所示。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_40904.jpg?sign=1739277947-60KcItVLcIcwgmzECwhb79AqGE2lSwpI-0-444d45fc5b8f8e5cccec113c93b1c12d)
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_9729.jpg?sign=1739277947-msmFAhFop0xxGAgDAGq81T6RdyfebaSz-0-44adb9cfebf25dc6968de533c8011bf6)
图3.9 构造函数并执行调用
【示例2】在实际开发中,使用function定义函数要比Function构造函数方便,且执行效果更好。Function仅用于特定的动态环境中,一般不建议使用。可以将上面的示例转换为function定义函数的方式,则代码如下:
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_9733.jpg?sign=1739277947-9WWB4INzzOEyBvTfkOm7yM5a8wRBkW3R-0-67ea5f9bc387f2a1f701c15e580b9013)
3.6.2 调用函数
使用小括号运算符来实现调用函数。括号运算符可以包含多个参数列表,参数之间通过逗号进行分隔。
【示例】本示例使用小括号调用函数f,并把返回值传递给document.write ()方法。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40908.jpg?sign=1739277947-xAxt36GYuY9pPFUjtsOTwNStzR4snwoH-0-4426007123953667e2a68bfe8af37446)
提示:一个函数可以包含多个return语句,但是在调用函数时只有第一个return语句被执行,且该return语句后面的表达式的值作为函数的返回值返回,return语句后面的代码被忽略。函数的返回值没有类型限制,它可以返回任意类型的值。
3.6.3 函数参数
参数可以分为两种:形参和实参。
形参就是在定义函数时传递给函数的参数,即形式上的参数。
实参就是当函数被调用时传给函数的参数。
【示例1】在本示例函数中,参数a和b就是形参,而调用函数中的23和34就是实参。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40910.jpg?sign=1739277947-hgxVZVeC4g7PUz7hcXgwOy5zJZBjId0t-0-314d8a4ff3399935f227d4fe17de1da2)
函数的形参没有个数限制,可以为零个或多个。函数形参的数量可以通过函数的length属性获取。
【示例2】上面的函数可以使用下面的语句读取函数的形参个数。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40912.jpg?sign=1739277947-ADBdAohD3bNz4vXBe5olaXlG332VuLim-0-44aff3447de8aed14eb3375dd0e4f0fc)
一般情况下,函数的形参和实参个数是相等的,但是JavaScript没有规定两者必须相等。如果形参数大于实参数,多出的形参值为unde fined;如果实参数大于形参数,多出的实参就无法被形参变量访问,从而被忽略。
【示例3】在本示例中,如果在调用函数时,传递3个实参值,则函数将忽略第3个实参的值,最后提示的结果为5。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40914.jpg?sign=1739277947-pqbwP85M6HsZ9v7qzaZgvINC1z4E2zmN-0-65f1b1e4a0b6776071e85900b0b02d27)
【示例4】本示例在调用函数时,仅输入1个实参。这时,函数就把第二个形参的值默认为unde fined,然后将unde fined与2相加。任何值与unde fined进行运算的结果都返回NaN(无效的数值),如图3.10所示。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_9867.jpg?sign=1739277947-dPCcLPMNT7TkbT7zQojOKzatw64kTYBA-0-87d1c7a3caa9204bf5bc111511f8ab3a)
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_9868.jpg?sign=1739277947-pOMPDQ7P0iRmaGWIGKRMEZR9A2Z9esez-0-567893bf81fb7c4693aaeb65d49888f7)
图3.10 形参与实参不一致时的运行结果
JavaScript定义了arguments对象,利用该对象可以快速操纵函数的实参。使用arguments.length可以获取函数实参的个数,使用数组下标(arguments[n])可以获取实际传递给函数的每个参数值。
【示例5】为了预防用户随意传递参数,函数体可以检测函数的形参和实参是否一致。如果不一致可以抛出异常,如果一致则执行正常的运算。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_40917.jpg?sign=1739277947-p3bXlSAqkWyb6KAp6G5fjqq0zlaWdsKV-0-fb0664443cdead92e87c9bffe985619e)
在函数add()中增加了一个条件检测,来判断函数的形参和实参的数量是否相同。如果不相同,则抛出一个错误信息对象;如果相同,则返回参数的和。然后调用函数,利用异常处理语句(try/catch)捕获错误信息,并在提示对话框中显示出来,如图3.11所示。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_9872.jpg?sign=1739277947-lwiSSOuuR1epcPBk3yoFwelwYzoI6Ny2-0-5f532676165850bc83f7d6fef2bef767)
图3.11 形参和实参不一致的异常处理