《web前端设计》课件-第4章 JavaScript 函数

第4章JavaScrit函数初识函数函数进阶闭包函数函数案例作用域预解析掌握了解掌握掌握学习目标了解函数的基本概念12掌握函数参数及返回值的使用3掌握arguments的使用4掌握函数作用域的使用目录☞点击查看本节相关知识点☞点击查看本节相关知识点函数案例4.24.1初识函数☞点击查看本节相关知识点4.3函数进阶☞点击查看本节相关知识点4.4作用域目录☞点击查看本节相关知识点4.5闭包函数☞点击查看本节相关知识点预解析4.6知识架构4.1初识函数

1函数的使用2什么是函数3函数的参数4函数参数的数量5函数的返回值6arguments的使用知识架构4.2函数案例1利用函数求任意两个数的最大值2利用函数求任意一个数组中的最大值3利用return提前终止函数45利用return返回数组利用函数求所有参数中的最大值知识架构4.2函数案例6利用函数反转数组元素顺序7利用函数判断闰年8获取指定年份的2月份的天数知识架构4.3函数进阶1函数表达式2回调函数3递归调用知识架构4.4作用域1作用域的分类2全局变量和局部变量3作用域链知识架构4.5闭包函数1什么是闭包函数2闭包函数的实现知识架构4.6预解析1var关键字的预解析效果2JavaScript中的函数的预解析1函数在使用时分为两步，声明函数和调用函数4.1初识函数

函数的使用functionsayHello

(){//函数体代码}sayHello()//调用函数语法结构function是声明函数的关键字（全部小写）函数名2在编写代码时，可能会出现非常多的相同代码，或者功能类似的代码，这些代码可能需要大量重复使用，此时就可以使用JavaScript中的函数。4.1初识函数

什么是函数functiongetSum(num1,num2){varsum=0;for(vari=num1;i<=num2;i++){sum+=i;}console.log(sum);//函数执行结束后，将结果输出}getSum(1,100); //输出结果：5050getSum(10,50); //输出结果：1230函数：求n~m的累加和调用getSum()定义getSum()34.1初识函数

函数的参数函数的参数分为形参和实参：形参：在声明函数时，在函数名称后面的小括号中添加的一些参数实参：当函数调用的时候，需要传递相应的参数，这些参数称为实参function函数名(形参1,形参2,…){//函数声明的小括号中的是形参//函数体代码}函数名(实参1,实参2,…)//函数调用的小括号中的是实参语法结构44.1初识函数

函数参数的数量函数的参数允许形参和实参的个数不同：当实参数量多于形参数量时，函数正常执行，多余的实参会被忽略当实参数量小于形参数量时，多出来的形参类似于一个已声明未赋值的变量，其值为undefined44.1初识函数

函数参数的数量functiongetSum(num1,num2){console.log(num1,num2);}getSum(1,2,3); //实参数量大于形参数量，输出结果：12getSum(1);//实参数量小于形参数量，输出结果：1undefined示例代码54.1初识函数

函数的返回值函数的返回值可以将函数的处理结果返回，用于根据函数的执行结果来决定下一步要做的事情，函数的返回值通过return语句实现。function函数名(){return要返回的值;//利用return返回一个值给调用者}语法结构64.1初识函数

arguments的使用当不确定函数中接收到了多少个实参的时候，可以用arguments来获取实参。这是因为arguments是当前函数的一个内置对象，所有函数都内置了一个arguments对象，该对象保存了函数调用时传递的所有的实参。64.1初识函数

arguments的使用functionfn(){console.log(arguments); //输出结果：Arguments(3)

[1,2,3,…]console.log(arguments.length);//输出结果：3console.log(arguments[1]);//输出结果：2}fn(1,2,3);示例代码4.2函数案例1

利用函数求任意两个数的最大值案例要求：编写一个getMax()函数，该函数接收两个参数，分别是num1和num2，表示两个数字。收到参数后，比较两个数的大小，返回较大的值。functiongetMax(num1,num2){returnnum1>num2?num1:num2;}console.log(getMax(1,3)); //输出结果：3示例代码4.2函数案例2

利用函数求任意一个数组中的最大值案例要求：利用函数求数组[5,2,99,101,67,77]中的最大数值。functiongetArrMax(arr){varmax=arr[0];for(vari=1;i<=arr.length;i++){if(arr[i]>max){max=arr[i];}}returnmax;}vararr=getArrMax([5,2,99,101,67,77]);console.log(arr); //输出结果：101示例代码4.2函数案例3

利用return提前终止函数案例要求：在getMax()函数中判断两个参数是否都是数字型，只要其中一个不是数字型，则提前返回NaN。functiongetMax(num1,num2){if(typeofnum1!='number'||typeofnum2!='number'){returnNaN;}returnnum1>num2?num1:num2;}console.log(getMax(1,'3'));//输出结果：NaN示例代码4.2函数案例4

利用return返回数组案例要求：在开发中，当需要返回多个值的时候，可以用数组来实现，也就是将要返回的多个值写在数组中，作为一个整体来返回。functiongetResult(num1,num2){return[num1+num2,num1-num2,num1*num2,num1/num2];}console.log(getResult(1,2));//输出结果：(4)

[3,-1,2,0.5]示例代码4.2函数案例5

利用函数求所有参数中的最大值案例要求：编写一个getMax()函数，该函数可以传任意数量的参数，在函数中会找出所有参数中最大的一个值，将该值返回。functiongetMax(){varmax=arguments[0];for(vari=1;i<arguments.length;i++){if(arguments[i]>max){max=arguments[i];}}returnmax;}console.log(getMax(11,2,34,666,5,100)); //输出结果：666示例代码4.2函数案例6

利用函数反转数组元素顺序案例要求：编写一个reverse()函数，该函数的参数是一个数组，在函数中会对数组中的元素顺序进行反转，返回反转后的数组。functionreverse(arr){varnewArr=[];for(vari=arr.length-1;i>=0;i--){newArr[newArr.length]=arr[i];}returnnewArr;}vararr1=reverse([1,3,4,6,9]);console.log(arr1); //输出结果：(5)

[9,6,4,3,1]示例代码4.2函数案例7

利用函数判断闰年案例要求：编写一个isLeapYear()函数，该函数的参数是一个年份数字，在函数中会判断该年份是否为闰年，返回布尔值的结果。functionisLeapYear(year){varflag=false;if(year%4==0&&year%100!=0||year%400==0){flag=true;}returnflag;}console.log(isLeapYear(2020)?'2020是闰年':'2020不是闰年');console.log(isLeapYear(2021)?'2021是闰年':'2021不是闰年');示例代码4.2函数案例8

获取指定年份的2月份的天数案例要求：编写一个fn()函数，该函数调用后会弹出一个输入框，要求用户输入一个年份，输入以后，程序会提示该年份的2月份有多少天。functionfn(){varyear=prompt('请输入年份：');if(isLeapYear(year)){alert(‘当前年份是闰年，2月份有29天’);}else{alert('当前年份是平年，2月份有28天');}}functionisLeapYear(year){//将上一个案例中的isLeapYear()函数中的代码复制到此处}fn();示例代码4.3函数进阶1

函数表达式函数表达式：是将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递，函数表达式的定义必须在调用前。varsum=function(num1,num2){ //函数表达式returnnum1+num2;};console.log(sum(1,2)); //调用函数，输出结果：3语法结构匿名函数4.3函数进阶2

回调函数回调函数：指的就是一个函数A作为参数传递给一个函数B，然后在B的函数体内调用函数A。此时，称函数A为回调函数。以算术运算为例进行讲解：functioncal(num1,num2,fn){returnfn(num1,num2);}console.log(cal(45,55,function(a,b){returna+b;}));console.log(cal(10,20,function(a,b){returna*b;}));2示例代码4.3函数进阶3

递归调用递归调用：指的是一个函数在其函数体内调用自身的过程，这种函数称为递归函数。以根据用户的输入计算指定数据的阶乘为例进行讲解：functionfactorial(n){ //定义回调函数if(n==1){return1;//递归出}returnn*factorial(n-1);}varn=prompt('求n的阶乘\nn是大于等于1的正整数，如2表示求2!。');n=parseInt(n);if(isNaN(n)){console.log('输入的n值不合法')}else{console.log(n+'的阶乘为：'+factorial(n));}示例代码4.4作用域1

作用域的分类变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域，JavaScript根据作用域使用范围的不同，划分如下：全局变量：不在任何函数内声明的变量（显式定义）或在函数内省略var声明的变量（隐式定义）都称为全局变量局部变量：在函数体内利用var关键字定义的变量称为局部变量块级变量：ES6提供的let关键字声明的变量称为块级变量4.4作用域2

全局变量和局部变量两者的区别：

在全局作用域下，添加或省略var关键字都可以声明全局变量，全局变量在浏览器关闭页面的时候才会销毁，比较占用内存资源在函数中，添加var关键字声明的变量是局部变量，省略var关键字时，如果变量在当前作用域下不存在，会自动向上级作用域查找变量。局部变量在函数执行完成后就会销毁，比较节约内存资源4.4作用域3

作用域链作用域链：当在一个函数内部声明另一个函数时，内层函数只能在外层函数作用域内执行，在内层函数执行的过程中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，称这种链式的查询关系为作用域链。4.5闭包函数1

什么是闭包函数所谓“闭包”指的就是有权访问另一函数作用域内变量（局部变量）的函数。主要的两点用途如下：可以在函数外部读取函数内部的变量可以让变量的值始终保持在内存中注意：由于闭包会使得函数中的变量一直被保存在内存中，内存消耗很大，所以闭包的滥用可能会降低程序的处理速度，造成内存消耗等问题。4.5闭包函数2

闭包函数的实现闭包的常见创建方式就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量可以在函