第4章 函数《JavaScript前端开发案例教程（第2版）》学习目标/Target学习目标/Target学习目标/Target章节概述/
Summary在日常开发中，若程序中有多个重复的功能，例如数组排序，如果每次用到该功能时都编写一遍该功能的逻辑代码，非常麻烦，而且
当需要修改该功能的逻辑代码时，需要多处修改，为此，JavaScript提供了函数。函数可以避免相同功能代码的重复编写，将程序中重复
的代码封装起来，提高程序的可读性，减少开发者的工作量，便于后期的维护。本章将针对函数的内容进行详细讲解。目录/Contents目录
/Contents初识函数4.1 先定一个小目标！熟悉函数的概念，能够说出函数的作用4.1.1 什么是函数4.1.1 什么是函
数函数用于封装一段完成特定功能的代码，相当于将包含一条或多条语句的代码块“包裹”起来，用户在使用时只需关心参数和返回值，就能完成特
定的功能。函数的优势在于提高代码的复用性，降低程序维护的难度。4.1.1 什么是函数函数分类 先定一个小目标！掌握函数的定义与调
用，能够根据程序需要定义函数并且完成函数的调用4.1.2 函数的定义与调用4.1.2 函数的定义与调用在开发一个功能复杂的模块
时，可能需要重复编写大量代码，这时可以使用自定义函数将重复的代码封装起来，在需要时直接调用即可。自定义函数的语法格式如下。func
tion 函数名([参数1, 参数2, …]) { 函数体}4.1.2 函数的定义与调用函数的定义由以下4部分组成：funct
ion：定义函数的关键字。函数名：可由字母、数字、下画线和$符号组成，不能以数字开头，不能是JavaScript中的关键字。参数：
外界传递给函数的值，此时为形参，可选的，多个参数之间使用“,”分隔。函数体：由函数内所有代码组成的整体，专门用于实现特定功能。函数
体内使用return关键字可以返回函数的结果。4.1.2 函数的定义与调用通过“函数名()”的方式即可实现函数的调用，小括号中可
以传入参数，其语法格式如下。函数名称([参数1, 参数2, …])参数表示实参，“[参数1，参数2…]”表示实参列表，实参个数可以
是零个、一个或多个。通常情况下，函数的实参列表与形参列表顺序对应，当函数体内不需要参数时，调用时可以不传参。函数定义与调用的编写顺
序不分前后。Tip 先定一个小目标！掌握函数参数的设置，能够根据程序的需要设置相关参数4.1.3 函数参数的设置4.1.3 函
数参数的设置函数在定义时根据参数的不同，可分为两种类型。无参函数：定义函数时不设置参数的函数。有参函数：定义函数时设置了参数的函数
。4.1.3 函数参数的设置无参函数适用于不需要提供任何数据即可完成指定功能的情况，示例代码如下。function greet(
) { console.log(''Hello everybody!'');}在自定义函数时，即使函数的功能实现不需要设置参数，小括
号“()”也不能省略。注意4.1.3 函数参数的设置在项目开发中，若函数体内的操作需要使用用户传递的数据，此时函数定义时需要设置
形参，用于接收用户调用函数时传递的实参，示例代码如下。function maxNum(a, b) { a = parseInt(
a); b = parseInt(b); return a >= b ? a : b;}4.1.3 函数参数的设置（1）含有
默认值的参数在设置函数的形参时，还可以为其指定默认值。当调用者未传递该参数时，函数将使用默认值进行操作，示例代码如下。多学一招：含
有默认值的参数与剩余参数function greet(name, say = ''Hi, I\''m '') { console.lo
g(say + name);}greet(''Li Ming'');4.1.3 函数参数的设置（2）剩余参数在函数定义时，除了可以指
定具体数量的形参外，还可以利用“…变量名”的方式动态的接收用户传递的不确定数量的实参，示例代码如下。多学一招：含有默认值的参数与剩
余参数function transferParam(num1, ...theNums) { console.log(theNum
s); // 在控制台输出用户调用函数时传递的剩余参数}transferParam(0, 1, 2, 3, 4);4.1.3
函数参数的设置（2）剩余参数示例代码的运行结果：多学一招：含有默认值的参数与剩余参数4.1.3 函数参数的设置（2）剩余参数若定
义transferParam()函数时，所有参数的数量都不确定，则可以修改成以下形式。多学一招：含有默认值的参数与剩余参数func
tion transferParam(...theNums) { console.log(theNums); // 在控制台输
出用户调用函数时传递的参数}transferParam(1, 2, 3, 4); 先定一个小目标！掌握arguments对象的使用
方式，能够通过该对象获取函数调用时传递的所有实参4.1.4 获取函数调用时传递的所有实参4.1.4 获取函数调用时传递的所有实
参arguments对象若不能确定函数的形参个数，定义函数时可以不设置形参，在函数体中直接通过arguments对象获取函数调用时
传递的实参。arguments是当前函数的一个内置对象，所有函数都内置了一个arguments对象，该对象保存了函数调用时传递的所
有实参。实参的个数可通过arguments.length获取，具体的实参值可通过数组遍历的方式进行获取。 先定一个小目标！掌握求任
意两数的最大值案例的开发，能够利用函数实现案例的需求4.1.5 【案例】求任意两数的最大值4.1.5 【案例】求任意两数的最大
值案例需求：本案例将实现求任意两数的最大值。实现思路：定义函数，接收两个将要进行比较的数字。利用选择结构语句实现比较两个数字的大小
，返回最大值。函数内外变量的作用域4.2 先定一个小目标！熟悉函数内外变量的作用域，能够区分全局变量和局部变量4.2 函数内外变
量的作用域4.2 函数内外变量的作用域通过前面的学习，我们知道变量需要先定义后使用，但这并不意味着，定义变量后就可以在任意位置使
用该变量。在自定义函数中定义一个age变量，在函数外进行访问输出，示例代码如下。function info() { var ag
e = 18;}info();console.log(age); // 报错，提示Uncaught ReferenceError
: age is not defined4.2 函数内外变量的作用域“age is not defined”，表示age变量没有
被定义。之所以报错是因为age变量只能在info()函数体内使用。4.2 函数内外变量的作用域变量的作用范围变量需要在被定义时的
区域内才可以使用，这个区域是变量的作用范围，被称为变量的作用域。JavaScript根据作用域使用范围的不同，可以将变量划分为以下
两种变量。全局变量：不在任何函数内定义（显式定义）的变量或在函数内省略var定义（隐式定义）的变量，它的作用域称为全局作用域，在同
一个页面文件中的所有脚本内都可以使用。局部变量：在函数体内利用var关键字声明的变量称为局部变量，它的作用域称为函数作用域，仅在该
函数体内有效。函数进阶4.34.3 函数进阶通过前面的学习，相信大家已经掌握了函数的使用。但函数的内容不仅仅包括函数的定义与调用
、函数参数的设置和函数内外变量的作用域等，还包括函数表达式、匿名函数以及回调函数等。 先定一个小目标！掌握函数表达式，能够实现函数
表达式的定义与调用4.3.1 函数表达式4.3.1 函数表达式函数表达式指的是将函数赋值给变量的表达式，通过“变量名()”的方
式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。var fn = function sum(num1, num2
) { // 定义求和函数表达式 return num1 + num2;};fn(2, 3); // 调用函数4.3.1
函数表达式函数表达式与函数的区别函数表达式的定义必须在调用前，且函数调用时采用的是“变量名()”的方式。函数定义的方式不限制定义
与调用的顺序。函数表达式中的函数名如果不需要可以省略。 先定一个小目标！掌握匿名函数，能够实现匿名函数的定义与调用4.3.2 匿
名函数4.3.2 匿名函数团队合作完成项目时，程序员经常定义一些函数来实现特定的功能，在给这些函数命名时经常会遇到与其他人取相同
名字的情况，如何来解决命名冲突问题呢？4.3.2 匿名函数使用JavaScript中的匿名函数可以有效避免函数名的冲突问题。所谓
匿名函数指的是没有名字的函数，也就是在定义函数时省略函数名。4.3.2 匿名函数匿名函数的实现方式匿名函数可以通过函数定义的方式
实现调用，下面介绍匿名函数的3个使用场景。函数表达式中省略函数名匿名函数自调用处理事件4.3.2 匿名函数1.函数表达式中省略函
数名利用函数表达式实现匿名函数，调用时使用“变量名()”，示例代码如下。var fn = function (num1, num2
) { return num1 + num2;};通常情况下，如果函数的返回值需要使用变量来接收时，可以使用函数表达式来实现匿名
函数的调用，并且可以通过“变量名()”的方式调用多次。4.3.2 匿名函数2. 匿名函数自调用使用小括号“()”直接包裹匿名函数
，示例代码如下。(function (num1, num2) { console.log(num1 + num2);})(2,
3);匿名函数后小括号“()”表示给匿名函数传递参数并立即执行，完成函数的自调用。自调用只能调用一次。4.3.2 匿名函数3.
处理事件使用匿名函数处理单击事件，示例代码如下。document.body.onclick = function () { a
lert(''Hi, everybody!'');};4.3.2 匿名函数箭头函数是ES6中新增的函数，它用于简化函数定义的语法，其
语法格式如下。多学一招：箭头函数() => { };箭头函数的小括号中可以传入参数，调用箭头函数时可以将箭头函数赋给一个变量，然后
通过变量名实现箭头函数的调用。4.3.2 匿名函数箭头函数的示例代码如下。多学一招：箭头函数var fn = (num1, nu
m2) => { return num1 + num2;};4.3.2 匿名函数箭头函数存在以下两种特殊情况：（1）省略大括号
和return关键字（2）省略参数外部小括号多学一招：箭头函数4.3.2 匿名函数（1）省略大括号和return关键字在箭头函数
中，当函数体只有一句代码，且代码的执行结果就是函数的返回值时，可以省略函数体的大括号以及return关键字。多学一招：箭头函数va
r fn = (num1, num2) => num1 + num2;4.3.2 匿名函数（2）省略参数外部小括号在箭头函数中，
当参数只有1个时，可以省略参数外部的小括号。多学一招：箭头函数var fn = name => { console.log(na
me);}; 先定一个小目标！掌握回调函数，能够实现回调函数的定义与调用4.3.3 回调函数4.3.3 回调函数什么是回调函数
项目开发中，若想要函数体中某部分功能由调用者决定，则可以使用回调函数。回调函数是由开发者预先定义好的一个函数，通常会作为参数传递给
被调用的函数。当被调用的函数执行时，会在特定的时机调用开发者传入的回调函数。嵌套与递归4.4 先定一个小目标！掌握函数嵌套与作用域
链，能够实现嵌套函数的定义与调用并且能够描述出什么是作用域链4.4.1 函数嵌套与作用域链4.4.1 函数嵌套与作用域链在开发
项目时，一个复杂的功能往往需要定义多个函数来完成，对于其中一个函数而言，它可能依赖另外一些函数才能运行。但是，如果我们希望这些依赖
的函数只能在本函数内部访问，其他函数不能访问，这时候可以把这些依赖的函数定义在本函数内部，这样在一个函数内部定义了其他函数就形成了
嵌套函数。4.4.1 函数嵌套与作用域链什么是作用域链对于嵌套函数而言，内层函数只能在外层函数作用域内执行，在内层函数执行的过程
中，若需要引入某个变量，首先会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，我们将这种链式的查询关
系称为作用域链。 先定一个小目标！掌握递归函数，能够实现递归函数的定义与调用4.4.2 递归调用4.4.2 递归调用递归调用是
函数嵌套调用中一种特殊的调用，它指的是一个函数在其函数体内调用自身的过程，这种函数称为递归函数。递归调用可以利用简单的代码实现复杂
的计算。 先定一个小目标！掌握如何利用递归实现求斐波那契数列第N项的值，能够独立完成案例代码编写4.4.3 【案例】求斐波那契数
列第N项的值案例说明斐波那契数列又称黄金分割数列，指的是“1, 1, 2, 3, 5, 8, 13, 21……”这样一个数列，从中
可以找出的规律是“这个数列从第3项开始，每一项都等于前两项之和”。本案例将利用递归实现计算斐波那契数列第N项的值。4.4.3 【
案例】求斐波那契数列第N项的值4.4.3 【案例】求斐波那契数列第N项的值案例的实现思路：如果N小于0则提示输入的数字不能小于0
。如果N等于0返回第0项的值为0。如果N等于1返回第1项的值为1。如果N大于1则进行递归调用，实现前两项值相加。闭包函数4.5 先
定一个小目标！熟悉闭包函数的概念，能够说出闭包函数的用途4.5.1 什么是闭包函数4.5.1 什么是闭包函数在JavaScri
pt中，内层函数可以访问定义在外层函数中的所有变量和函数，并包括其外层函数能访问的所有变量和函数。但是在函数外部则不能访问函数的内
部变量和嵌套函数。在项目开发中，当我们需要在函数外部访问函数内部变量和嵌套函数时可以利用闭包函数来访问。4.5.1 什么是闭包函
数所谓闭包函数，指的就是有权访问另一函数作用域内变量（局部变量）的函数，它主要的用途是以下两点：在函数外部读取函数内部的变量。让变
量的值始终保持在内存中，直到页面关闭。因为闭包会使得函数中的变量的值一直被保存在内存中，内存消耗很大，所以闭包的滥用可能会降低程序
的处理速度，造成内存消耗等问题。注意 先定一个小目标！掌握闭包函数的实现，能够定义与调用闭包函数4.5.2 闭包函数的实现4.5
.2 闭包函数的实现闭包函数常见的实现方式是在一个函数A内部创建另一个函数B，然后将函数B作为函数A的返回值返回。当调用函数A后
，调用者就会得到函数B，通过函数B来访问函数A中的局部变量。 先定一个小目标！掌握动手实践：获取指定年份的2月份的天数的实现方法，
能够独立完成代码编写动手实践：获取指定年份的2月份的天数动手实践：获取指定年份的2月份的天数案例需求在日常生活中，每个公司的考勤组一般会先计算出每个月员工应出勤的天数，这样方便考勤人员记录考勤。而2月份是一个特殊的月份，考勤人员在计算2月份应出勤天数时非常麻烦，因为2月份的天数由年份决定，年份分又为平年和闰年，平年的2月份只有28天，闰年的2月份有29天。本案例将实现获取指定年份的2月份的天数。动手实践：获取指定年份的2月份的天数案例效果如下。案例的实现思路：定义函数，用于返回指定年份的2月份的天数，在函数中接收用户输入的年份。定义函数，用于判断用户输入的年份是否为闰年。本章小结本章首先讲解了初识函数，主要讲解了函数的概念、函数的定义与调用，以及函数参数的一些使用细节，并结合求任意两数的最大值的案例帮助读者掌握函数的使用；然后讲解了函数内外变量的作用域、匿名函数、嵌套与递归和闭包函数；最后通过一个动手实践的案例，帮助读者更好地理解函数。通过本章的学习，希望读者能够熟练掌握函数的使用。本章小结 |
|
