《HTML教程》-5.5-5.6教学材料

5.5.1函数定义

JS的函数定义有几种方式，下面分别介绍。格式1：functionfunName([<参数列表>]){ //函数体，即实现功能的代码。}◆function为关键字，不能改变。

◆圆括号()是必须的，不能省略，其中为参数列表。◆funName为函数名，必须是一个合法的JavaScript标识符。在实际应用中函数名应该见名知义，不能是无意义的字符串。

◆参数列表中的多个参数以逗号（,）分隔。参数列表是可选的，函数可以没有参数。

◆花括号{}是函数体，也是必须的。函数中所有的代码都写在花括号中。格式2：

varfunName=function([<参数列表>]){//函数体};这里定义了一个匿名函数，并把它赋给变量funName，funName就相当于函数名，可以通过funName调用这个匿名函数。严格说来这不是函数的定义，而是一条函数定义语句，所以最后的分号（;）不能省略。这里的funName也可以是对象的属性，此时的函数称为对象的方法。格式3：

varfunName=newFunction([‘参数1’[,‘参数2’,…]],‘函数体’);其中，Function为JavaScript的关键字，现举例如下：varadd=newFunction('x','y','returnx+y');这就定义了一个名为add的函数，实现两个参数的相加。格式4：箭头函数

这种定义函数的方式是ECMAScript6新增的函数定义方法。主要是便于书写，而且对于函数执行上下文this界定也十分清晰。执行上下文this以字面编写的代码为界，出现在什么地方，那里就是它的上下文。箭头函数不能访问arguments参数对象，而且不能使用new关键字创建对象。箭头函数定义格式如下：参数=>表达式;或者([<参数列表>])=>{//语句块（函数体）}关于箭头函数this的用法说明见清单5-5。5.5.2函数调用

函数调用非常简单，只需要函数名加上圆括号，在圆括号中写上实际参数即可。格式如下：函数名([<实参列表>]);或者对象名.方法名([<实参列表>]);//以对象方法的形式调用函数但是函数调用时实参与形参的对应关系比较奇怪。在JS中函数调用中，实际参数与形式参数不一定一一对应。实际参数可能少于、等于或多于形式参数的个数。

◆实际参数少于形式参数时，缺少的形式参数以undefined代替。

◆实际参数多于形式参数时，多余的参数存入arguments对象。

◆类型不同时会发生自动类型转换。函数调用中另一个比较重要的问题就是调用上下文，用this表示。调用上下文有许多属性和方法可以在函数执行时调用。JavaScript中运行上下文，即this关键字有以下几种情况：

◆非严格模式下，上下文this为全局对象。

◆严格模式下，上下文this为undefined。

◆函数作为对象的方法时，上下文为对象本身。全局对象的方法和属性4.3.4节已简单论述，详细可以参考文献[24]，这里不再详细讨论。关于JS的this是一个比较复杂的话题，这里就不展开讨论了。还有一种函数调用是内联函数调用，即函数的声明与调用同时进行。这种调用调用方式适用于只使用一次的函数，没必要再取函数名，也不需要专门的调用，在函数定义的同时就进行调用了。如(function(a,b){return(a+b);})(1,2);5.5.3参数处理

JavaScript中的参数是比较有特色的，与其他编程语言大不相同。除了实际参数与形式参数个数可以不一致外，还有以下特征。（1）默认参数默认参数是指在函数定义时给形式参数赋初值，函数调用时如果传递了实际参数，则使用实际参数的值，若没有传递实际参数，则使用指定的初始值。如functiongreeting(msg="hello",name="程继洪"){ returnmsg+name;}这里的msg和name都是缺省参数，都有自己的缺省值。主要用在程序需要参数值，而调用者可能忽略参数的情况。可以避免检查参数对象arguments.length是否为零，以及参数是否为undefined，提高程序的健壮性。（2）Rest参数

Rest参数直译过来就是“剩余参数”，在JavaScript中用连续的3个点号（...）表示，它可以接收多个参数。Rest参数实质上是参数数组，可以调用它的数组相关方法。语法格式如下面的实例所示。functionrestDemo(x,...y){ out(y);//out为自定义的输出函数 //Rest参数y可看作数组 returnx*y.length;}（3）Spread操作符

Spread操作符与Rest参数作用正好相反，Rest函数将多个独立的参数组合成一个数组，而Spread操作则将一个数组拆分成若干个独立的参数/元素。Spread操作符也是用3个连续的点号（...）表示。Spread操作符不只是用在函数参数中，也可以用在其他需要把数组拆分的场合。举例如下：functionadd(a,b){ returna+b;}add(...[4,5]);//相当于add(4,5);这个例子貌似有点画蛇添足了，但把数组拆分成独立元素的时候，Spread操作符是非常简单而有用的。再如下面的例子：leta=[2,3,4];letb=[1,...a,5];则b数组的内容为[1,2,3,4,5]，是不是很简单呢？关于函数的内容，我们把所有知识点总结成一个实例，代码如清单5-5所示，所有代码在随书源码的Listing5-5.html中，结合前面的讲解和代码注释很容易就能看明白。下面再说一些重要内容和难点再作一下说明。

◆函数调用时实际参数与与形式数的个数、类型和顺序可以不对应。对于缺少的参数赋值为undefined，多余的参数（包含与形式参数对应的实际参数）放入arguments对象中，如果类型不匹配，则进行自动类型转换。遍历函数所有参数的方法如下：for(varpofarguments){ document.write(p+",");};

◆关于函数执行上下文this，是比较难于理解的。它与Java语句的this不同，是可以变化的，虽然这里我们不展开讨论关于this的话题，以下最基本的几点还是要掌握。(function(){ out(this.parseInt("33.3"));})();这个匿名函数是独立定义的函数，非严格模式下，它的执行上下文this指向全局对象。parseInt()是全局对象的方法，所以这里可以正常执行，把字符串“33.3”转换成整数。而在严格模式下，this指向undefined，所以下面的代码为错误代码，无法正常执行。(function(){ 'usestrict'; //错误，此时this为undefined out(this.parseInt("44.4"));})();下面的匿名函数作为对象p的方法，所以它的this就是对象p，可以通过this访问对象p的name属性。varp={name:"程继洪"}; p.hello=function(){ out("Hello"+);};p.hello();◆Rest参数将对应的多个参数包装成一个数组，所以可以对Rest参数调用关于数组的方法。对于下面的代码functionrestDemo(x,...y){ out(y); //y是一个数组 returnx*y.length;}out(restDemo(3,'hello',true)===6);参数y是一个Rest参数，调用中传递的参数为'hello'和true，所以y.length的值为2。在函数体中可以通过遍历数组的方式使用Rest参数中的每个参数值。◆out(add(...[4,5]));代码中用到了Spread操作符，也就相当于out(add(4,5));。5.6总结恭喜你又前进了一步，学会了JS的对象、数组和函数。在本章