![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=1739298776-2Zt5LLxQ0d33MgSnL4kyJhWiINZffxNQ-0-8a5dc92ff52c7bff1840f0667143409d)
命名函数的方法也被称为声明式函数,而匿名函数的方法则被称为引用式函数或者函数表达式,即把函数看作一个复杂的表达式,并把表达式赋予变量。
使用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=1739298776-lMWSANGs4XmzeFIqklphxN2jPX5rOIEY-0-9af449155c382dd79a3ea8527024fc80)
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_9729.jpg?sign=1739298776-lkyvCRfG7ZkdGq6R9SQCyFOKffbMwjxY-0-64ea3831a97fd0383065d418c416d59d)
图3.9 构造函数并执行调用
【示例2】在实际开发中,使用function定义函数要比Function构造函数方便,且执行效果更好。Function仅用于特定的动态环境中,一般不建议使用。可以将上面的示例转换为function定义函数的方式,则代码如下:
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P71_9733.jpg?sign=1739298776-O77IvzJ1aXp07hJuUdgA6r05PICJBj4q-0-b4ca55f13a708975e7b7bd4cf74c8052)
3.6.2 调用函数
使用小括号运算符来实现调用函数。括号运算符可以包含多个参数列表,参数之间通过逗号进行分隔。
【示例】本示例使用小括号调用函数f,并把返回值传递给document.write ()方法。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40908.jpg?sign=1739298776-gO4I05tm2d1qs6OzzwrEolTSprS5g8kd-0-905ab1fd65e1058024f88bf9b858bf7c)
提示:一个函数可以包含多个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=1739298776-L1jZoyDtAkOsUWVbvNh133wY5cgPuN4W-0-b8754a26efb044ce4ff650085a87310a)
函数的形参没有个数限制,可以为零个或多个。函数形参的数量可以通过函数的length属性获取。
【示例2】上面的函数可以使用下面的语句读取函数的形参个数。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40912.jpg?sign=1739298776-DwZrO09AdLj40pLVomXyONVT9ak2eYyX-0-6e2db7e9659a2745876713ec5b8d32e0)
一般情况下,函数的形参和实参个数是相等的,但是JavaScript没有规定两者必须相等。如果形参数大于实参数,多出的形参值为unde fined;如果实参数大于形参数,多出的实参就无法被形参变量访问,从而被忽略。
【示例3】在本示例中,如果在调用函数时,传递3个实参值,则函数将忽略第3个实参的值,最后提示的结果为5。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P72_40914.jpg?sign=1739298776-rL0EZ0I4NdfSTYMEVLoQM05cDGPdQ6gx-0-3c3c7ce14bdfab7af3ee808d685ca7fc)
【示例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=1739298776-PIFwVhQln2NPMdGh9eQhjuOquS4bqVMK-0-6d79cf3673790bf444b2d54cfae0fe37)
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_9868.jpg?sign=1739298776-Uayvlur7YyRMnaQEe74Tx2NuwNVeMILD-0-a3174c86599bd6e836f20a9819af3eca)
图3.10 形参与实参不一致时的运行结果
JavaScript定义了arguments对象,利用该对象可以快速操纵函数的实参。使用arguments.length可以获取函数实参的个数,使用数组下标(arguments[n])可以获取实际传递给函数的每个参数值。
【示例5】为了预防用户随意传递参数,函数体可以检测函数的形参和实参是否一致。如果不一致可以抛出异常,如果一致则执行正常的运算。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_40917.jpg?sign=1739298776-6YbWXWv0LdVBiPaI42u1XTOtWOoNDKwk-0-a6761bbe6076c64dc5cadbdbccbf2ee7)
在函数add()中增加了一个条件检测,来判断函数的形参和实参的数量是否相同。如果不相同,则抛出一个错误信息对象;如果相同,则返回参数的和。然后调用函数,利用异常处理语句(try/catch)捕获错误信息,并在提示对话框中显示出来,如图3.11所示。
![](https://epubservercos.yuewen.com/43C118/17214367505511406/epubprivate/OEBPS/Images/Figure-P73_9872.jpg?sign=1739298776-VkLGghgNjfhmMMlBLpkxjYckCz52khWR-0-9a9db8fcc5e79d3265422c222434d74b)
图3.11 形参和实参不一致的异常处理