JavaScript前端开发案例教程第4章_函数_教学
JavaScript前端开发实用技术教程第4章
4.2 JavaScript内置对象
4.2.1 4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 JavaScript的内置对象框架 基类Object Date类 String类 Array类 Math对象
4.2.1 JavaScript的内置对象框架
JavaScript内置类的基本功能
本章知识点
4.1 面向对象程序设计思想简介 4.2 JavaScript内置对象 4.3 DOM编程 4.4 BOM编程
4.1 面向对象程序设计思想简介
面向对象程序设计的一些基本概念
（1）对象（Object）：面向对象程序设计思想可以将一组数据和与这组 数据有关操作组装在一起，形成一个实体，这个实体就是对象。 （2）类（class）：具有相同或相似性质的对象的抽象就是类。因此， 对象的抽象是类，类的具体化就是对象。例如，如果人类是一个类，则 一个具体的人就是一个对象。 （3）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。 （4）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其 他类定义的结构和行为。继承描述了类之间的关系。子类可以对基类的 行为进行扩展、覆盖、重定义。如果人类是一个类，则可以定义一个子 类“男人”。“男人”可以继承人类的属性（例如姓名、身高、年龄等 ）和方法（即动作。例如，吃饭和走路），在子类中就无需重复定义了 。从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同 子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性 ，而子女也具有自己的特性。 （5）方法：也称为成员函数，是指对象上的操作，作为类声明的一部分 来定义。方法定义了可以对一个对象可以执行的操作。
Date类的常用方法
方法 getDate getDay 具体描述 返回 Date 对象中用本地时间表示的一个月中的日期值(1 ~ 31) 返回 Date 对象中用本地时间表示的一周中的日期值(0 ~ 6)。0表示星期天， 1表示星期一，2表示星期二，3表示星期三，4表示星期四，5表示星期五，6 表示星期六 getFullYear 返回 Date 对象中用本地时间表示的4位数字年份值 getHour 返回 Date 对象中用本地时间表示的小时值(0 ~ 23) getMilliseco 返回 Date 对象中用本地时间表示的毫秒值(0 ~ 999) nds getMinutes 返回 Date 对象中用本地时间表示的分钟值(0 ~ 59) getMonth 返回 Date 对象中用本地时间表示的月份值(0 ~ 11) getSeconds 返回 Date 对象中用本地时间表示的秒钟值(0 ~ 59) getTime 返回 1970年1月1日至今的毫秒数 setDate 设置 Date 对象中月的某一天(1 ~ 31) setFullYear 设置 Date 对象中用本地时间表示的年份值 setHour 设置 Date 对象中用本地时间表示的小时值 setMilliseco 设置 Date 对象中用本地时间表示的毫秒值 nds setMinutes 设置 Date 对象中用本地时间表示的分钟值 setMonth 设置 Date 对象中用本地时间表示的月份值 setSeconds 设置 Date 对象中用本地时间表示的秒钟值 setTime 以毫秒（据GMT 时间1970 年1月1日午夜之间的毫秒数）设置 Date 对象 setYear 设置 Date 对象中的年份值 toString 返回对象的字符串表示
JavaScript+jQuery前端开发基础教程(第2版)(微课版)第4章
2．设置JavaScript对象属性注册事件处理程序
将函数设置为事件目标对象的事件属性值，也可完成事件处理程序的 注册。
3．使用addEventListener()方法注册事件处理程序
不管是通过设置属性，还是通过调用addEventListener()方法注册的事 件处理程序，在处理程序中调用preventDefault()方法均可阻止事件默认 动作。
在事件处理程序中，也可通过将event.returnValue属性设置为false来阻 止事件默认动作。
4.2.4 阻止事件传播
beforeunload和unload事件处理过程会屏蔽所有用户交互，window.open、alert、 confirm等都无效，不能阻止unload事件。一般在unload事件处理程序中执行一些必要 的清理操作，事实上只有极少的这种需求。
4.2.6 鼠标事件
鼠标事件对象除了拥有事件对象的主要属性外，还有下列常用属性。
stopPropagation()方法：调用该方法可阻止事件传播过程，事件传播路径中的后继节点不 会再接收到该事件。
3．事件处理程序的返回值
事件处理程序的返回值具有特殊意义。 通常，事件处理程序返回false时，会阻止浏览器执行这个 事件的默认动作。 例如，表单的submit事件处理程序返回false时，会阻止提 交表单；单击链接<a>时，会跳转到链接的URL，若在其 click事件处理程序中返回false，则会阻止跳转。
cancelable属性：逻辑值，表示是否能用preventDefault()方法取消对象的默认动作。
javascript函数的定义和调用
javascript函数的定义和调用JavaScript函数是JavaScript中最重要的概念之一，它是用于创建可重复使用的代码模块的一种形式。
它允许开发人员处理更复杂的算法，同时可以创建更简单、更容易维护的代码。
每个JavaScript 函数都有它自己的定义和调用程序。
定义函数在JavaScript中，函数都是通过关键字“function”定义的。
函数定义可以包括参数、返回值类型和函数体，就像下面这个示例一样：function functionName(parameter1, parameter2) {// Function Body}在上面的代码中，“functionName”是函数的名称，“parameter1”和“parameter2”是函数的参数，而“Function Body”是函数的体，它是函数的主体部分。
函数的参数可以是任何类型的值，可以是字符串、数字、对象等等。
另外，函数的返回值类型可以是任何类型的值，也可以是任何类型的对象。
调用函数在JavaScript中，函数可以通过函数名称和参数列表来调用。
函数调用的语法如下：functionName(parameter1, parameter2,…);上面的代码显示，函数调用使用函数名称和参数列表来调用函数。
在函数调用中，参数列表中的参数值将替换函数定义中的参数，函数将返回定义时指定的返回值。
例如，下面这个示例函数用于计算两个数字之和：function add(num1, num2) {return num1 + num2;}以上函数的调用可以像下面这样：let sum = add(2, 3);在上面的代码中，“add”函数使用“2”和“3”作为参数调用，它将返回5，并将结果保存在“sum”变量中。
JavaScript函数也可以用于定义和调用回调函数，这些回调函数可以在完成异步操作后执行某些操作。
例如，以下示例函数可以定义并调用一个异步函数，该函数将在完成操作后调用回调函数：function doAsyncOperation(callback) {// Perform the asynchronous operation.// Once the operation is complete, call the callback function.callback();}// Define a callback function.function myCallbackFunction() {console.log(The asynchronous operation has completed.);}// Invoke the doAsyncOperation function, passing it the callback function.doAsyncOperation(myCallbackFunction);在上面的代码中，“doAsyncOperation”函数定义了一个异步操作，并将一个回调函数作为参数传入。
JavaScript+jQuery前端开发基础教程教案
JavaScript+jQuery前端开发基础教程教案第一章：JavaScript概述1.1 课程介绍本章节将介绍JavaScript的发展历程、特点以及应用场景。
使学生了解JavaScript的历史背景和基本概念，为后续学习打下基础。
1.2 教学目标了解JavaScript的历史和发展掌握JavaScript的基本特点掌握JavaScript的应用场景1.3 教学内容1.3.1 JavaScript的历史和发展1.3.2 JavaScript的基本特点1.3.3 JavaScript的应用场景1.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
1.5 课后作业简述JavaScript的历史和发展。
列举出JavaScript的三个基本特点。
说出JavaScript的应用场景。
第二章：HTML与CSS基础2.1 课程介绍本章节将介绍HTML和CSS的基本概念，以及如何使用它们来创建网页。
学生将学会如何编写HTML代码和应用CSS样式。
2.2 教学目标掌握HTML的基本结构了解CSS的作用和基本语法学会使用CSS样式化网页2.3 教学内容2.3.1 HTML基本结构2.3.2 CSS的基本语法和作用2.3.3 使用CSS样式化网页2.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
2.5 课后作业编写一个简单的HTML页面，包括、段落和图片。
尝试使用CSS样式化你的HTML页面，使其看起来更美观。
第三章：JavaScript基本语法和操作3.1 课程介绍本章节将介绍JavaScript的基本语法和基本操作，如变量、数据类型、运算符、控制语句等。
学生将学会如何编写简单的JavaScript代码。
3.2 教学目标掌握JavaScript的基本语法学会使用JavaScript进行基本操作3.3 教学内容3.3.1 JavaScript的基本语法3.3.2 变量和数据类型3.3.3 运算符和控制语句3.4 教学方法采用讲解、案例演示、互动提问等方式进行教学。
JavaScript前端开发案例教程第4章_函数_教学
})(2, 3);
① 函数表达式中省略函数名
var fn = function (num1, num2) { return num1 + num2;
}; fn(1, 2);
③ 处理事件
document.body.onclick = function () { alert('Hi, everybody!');
✎ 4.2 变量的作用域
多 学 一 招 垃圾回收机制
在开发中若要保留局部变量的值，可以通过以下两种方式实现：
// 第1种方式：利用return返回 function test(num) {
num = num + 1; return num; } var num = test(24); console.log(num);//输出结果：25
函数体…… }
✎ 4.1 函数的定义与调用
1. 初识函数
➢ function：定义函数的关键字。 ➢ 函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能
以数字开头，且不能是JavaScript中的关键字。 ➢ 参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。 ➢ 函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。 ➢ 返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回。
// 第2种方式：利用全局变量保存 var memory; function test(num) {
memory = num + 1; } test(24); console.log(memory);// 输出结果：25
JavaScript前端开发案例教程函数教学
✎ 4.1 函数的定义与调用
4. 【案例】字符串大小写转换
代码实现思路： ① 编写HTML表单，设置两个文本框和两个按钮，
文本框显示转换前后数据，按钮用于转换。 ② 为按钮添加点击事件，并利用函数deal()处理。 ③ 编写deal()函数，根据传递的不同参数执行不同
的转换操作。 ④ 将转换后的数据显示到对应位置。
function greet(name, say = 'Hi, I\'m ') {
默
console.log(say + name);
认
值
}
函数的形参在设置时，还可以为其指定默认值。当调用者未传递该参数时，函数 将使用默认值进行操作。
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
示 例
return a >= b ? a : b;
}
✎ 4.1 函数的定义与调用
2. 参数设置
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。 实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。 其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
}
无确定的形参
✎ 4.1 函数的定义与调用
3. 函数的调用
当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。 函数的调用非常简单，只需引用函数名，并传入相应的参数即可。 函数声明与调用的编写顺序不分前后。
函数名称([参数1, 参数2, ……])
JavaScript前端开发基础教程课件第4章
浏览器对象模型（BOM）
navigator对象 navigator对象代表了用户的浏览器，其中包含了浏览器的名称、版本、用户、 插件等信息。对于navigator对象的使用一般只是用其属性，因为navigator没 有常用的方法。
浏览器对象模型（BOM）
网页弹窗 我们平时浏览网页中，经常会遇到网页中的弹窗，其中有些时警告，有些时 询问是否确认某项提交功能，有些则还包含了输入框。这些网页的弹窗都是由 window对象的方法产生的，网页的弹窗对象一共包括三种： 警告弹窗：使用window.alert("警告内容")调用，一般用于警告用户的某些操 作，弹窗中只有一个确认按钮，单击后弹窗消失 确认弹窗：使用window.confirm("确认内容")调用，一般用于在用户提交某 项操作时提醒其是否确认提交 提示弹窗：使用window.prompt("提示内容"[, "输入框占位值"])调用，一般 在需要用户输入内容时使用，输入框占位符参数可以省略
表单
表单样例 样例介绍
媒体
HTML音频 声音在HTML中可以以不同的方式播放。 1. 使用 <embed> 元素 2. 使用 <object> 元素 3. 使用 HTML5 <audio> 元素
媒体
HTML视频 1. 使用 <embed> 标签 2. 使用 <object> 标签 3. 使用 HTML5 <video> 元素 4. 最好的 HTML 视频解决方法 5. 视频网站解决方案 6. 使用超链接
浏览器对象模型（BOM）
BOM的全称是Browser Object Model（浏览器对象模型），既然叫做浏览器 对象模型，那顾名思义是一种能够对浏览器内容进行访问和操作的工具。不同 于DOM的是，BOM至今还没有一个正式的标准。使用BOM接口可以使HTML 页面实现与浏览器之间的交互，同样地用户也可以通过HTML页面实现与浏览 器之间的交互。
Javascript-4-函数-上
1：函数的概念和作用定义：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
作用：可以使一段代码块重复的使用。
2：函数的编写function funcName(){}3：函数调用调用方式：1：手动调用。
即：函数名称()。
2：事件驱动。
4：事件的概念种类及作用1：什么是事件？通过鼠标或者键盘在浏览器窗口或者网页元素(按钮、文本框)上执行的操作，我们称之为事件(Event)。
2：什么是事件驱动？由事件引发的一连串程序的动作，称为事件驱动(Event-Driver)。
举个例子：人被挨打后或者听到葡萄后做出的反应。
事件类型：鼠标事件，键盘事件，网络事件等。
常用事件：onclick，ondblclick，onmouseover，onmouseout，onkeydown，okeyup。
5：事件和循环结合打印九九乘法表。
6：函数的好处7：参数的声明定义：在调用函数的时候，我们可以向其传递值，这些值被称为参数。
多个参数用逗号(,)分割。
8：参数的传递应用：1：编写一个函数，计算两个数字的和、差、积、商。
要求：使用传参的形式。
2：编写一个函数，计算三个数字的大小，按从小到大顺序输出。
1：函数创建方式1：函数声明式。
2：函数表达式（函数字面量）。
3：函数构造法。
注：函数表达式也可以指定函数名称，而函数声明是不可以省略函数名称。
直接用函数表达式指定的函数名称调用函数会报错。
2：声明式和表达式的区别1：JS解析器如何区分是函数声明还是函数表达式？如果一条语句是以function关键字开始，那么这段会被判定为函数声明。
而函数声明是不能被立即执行的，这无疑会导致语法的错误(SyntaxError)，因此就必须有一个办法，使解析器可以将之识别为函数表达式。
既然解析器识别函数定义的条件是以function关键字开始，那么只需要在function关键字前面有任何其他的运算符，就会从函数的定义转变为函数表达式。
2：如何将函数声明式转换成函数表达式？~function(){}();+function(){}();-function(){}();void function(){}();(function(){})();前几个转换方式开起来比较丑，通常都用最后一种来转换。
第四章 JAVASCRIPT的函数
上一页
下一页
返回本章首页
4.parseFloat()、parseInt()函数
parseFloat()将字符串开头的整数或浮 点数分解出来，转换为浮点数。如： parseFloat(“123.45”); parseFloat(“123.45abc”); 返回浮点数123.45， 而 parseFloat(“abc123.45”); parseFloat(true); 则返回NaN。
上一页
下一页
返回本章首页
4.6.2 解决嵌套调用引起的效率问题
有时，当采用多个函数进行实现时，可能会 引起程序运行效率不高的问题。 例4.9，只使用一条循环语句求 1+(1+2)+(1+2+3)+…+(1+2+…+n)的值。 可读性和运行效率都是编写高质量软件的要 素。对于初学者，要优先考虑程序的可读性，把 程序写好写对是第一位的。
4.pt的预定义函数。可提高编 程效率。 1.eval()函数 计算字符串表达式的值，如 x=eval("123*321/9") 例4.1，求用户在提示对话框中输入的任意 常量表达式 注意:字符串中只有数字才可以计算
上一页 下一页 返回本章首页
2.escape()、unescape()函数
上一页
下一页
返回本章首页
实例与作业
实例:用户注册信息验证(login.html) 作业: 1、编写一个函数f(x)=4x2+3x+2,使用户通过 提示对话框输入x的值，能得到相应的计算结果 2、编写一个递归函数，计算12！-10！ 3、认真理解例4.6、4.7的参数传递方式 4 、思考例4.11的程序思路
(完整word版)第4章JavaScript 函数教案-2
教学难点
ቤተ መጻሕፍቲ ባይዱ如何自定义函数
教学准备
1.装有EditPlus、Dreamweaver的电脑
2.教学课件PPT
3.教材：《JavaScript前端开发程序设计教程（微课版）》李玉臣臧金梅人民邮电出版社
作业设计
1.编写函数，调用本函数实现在页面上输出“HelloWorld”；
2.编写函数，实现100-1000的所有素数
第4章函数
课程名称
JavaScript前端开发程序
设计
项目名称
自定义函数
任务名称
自定义函数
课时
2
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1.具备自定义JavaScript函数的能力
2.具备在调用自定义JavaScript函数的的能力
3.具备使用函数参数解决问题的能力知识目标：
1.掌握自定义函数的方法；
2.掌握自定义函数调用的方法
3.掌握函数参数和函数返回值的使用方法素质目标：
1.培养学生信息搜集能力
2.培养学生团结合作、互帮互助的能力；
教学内容
1.什么是自定义函数
2.自定义函数
（1）如何自定义函数？
（2）自定义函数的调用；
3.教师讲解涉及的知识点
4.课堂训练与小结
教学重点
三、函数的参数及返回值的使用。
案例：
1.编写函数，调用本函数实现在页面上输出“HelloWorld”；
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
JavaScript函数式编程入门教程
JavaScript函数式编程入门教程章节一：函数式编程概述函数式编程（Functional Programming，简称FP）是一种编程范式，它将计算视为数学函数的组合。
与传统的命令式编程不同，函数式编程主要关注函数的输入输出，以及函数之间的组合。
本章将介绍函数式编程的基本概念和理念。
函数式编程的基本特点是不可变数据和纯函数。
不可变数据指的是数据一旦创建就不可修改，而纯函数是指函数的返回值只由输入决定，不依赖于外部状态。
这两个特点使得函数式编程具有可重复性、可缓存性和可测试性等优点。
章节二：函数与闭包JavaScript中的函数是一等公民，可以作为参数传递给其他函数，也可以作为返回值。
这为函数式编程提供了便利。
闭包是函数式编程中的重要概念，它指的是一个函数可以访问并修改其作用域外部的变量。
闭包可以用来创建私有变量和实现柯里化等高级技术。
本章将详细介绍函数的创建与调用、函数作为参数和返回值、闭包的概念与用法，以及柯里化的实现方式。
章节三：高阶函数高阶函数是指能够接受函数作为参数或返回函数的函数。
JavaScript中的函数可以作为数据进行传递，这为高阶函数的应用提供了基础。
高阶函数可以用来简化代码、实现函数组合和抽象常用逻辑等。
本章将介绍高阶函数的基本概念和常见用法，包括map、filter、reduce等常用高阶函数的实现和应用。
章节四：函数组合与管道函数组合和管道是函数式编程精髓的核心概念。
它们是将多个函数按照一定的顺序组合起来，形成一个新的函数。
函数组合可以使代码更加模块化、可读性更高，并且有助于避免副作用。
本章将介绍函数组合和管道的原理和用法，包括函数合成、函数链式调用、函数组合器等相关概念和实现方式。
章节五：函数式编程的常用技巧与技术函数式编程有许多常用的技巧和技术，能够使代码更加简洁、高效和易于维护。
本章将介绍一些常用的函数式编程技巧，包括偏函数、惰性计算、柯里化的实际应用、函数式异步等。
课件：javascript函数
函数声明语句/函数表达式
➢ 函数声明语句会在JS预编译时进行声明前置操作（当前作用域下） ➢ 函数声明可先调用，在声明 ➢ 函数表达式语句是一个为变量赋值的过程 变量值为一个匿名函数 ➢ 函数表达式语句的变量会在当前作用域下声明前置，而值只有在赋值之后才可使用 ➢ 函数表达式语句必须先创建表达式在进行调用 ➢ 函数表达式应用场景：
WEB前端开发
函数调用
创客学院 韩老师
ቤተ መጻሕፍቲ ባይዱ
函数的调用
➢ 一般情况下，调用函数使用函数名 + （）的方式进行调用 function fn(){console.log('hello world')} // fn() === 'hello world'
➢ 当匿名函数传递给变量的时候，使用变量 + () 的方式进行调用 var fn = function(){alert('hello')} // fn() === 'hello'
➢ ES6创建箭头函数：() => {}; // 节省代码量 没有arguments对象
➢ 函数生成器： function* f() {} // 无return语句 使用yield代替，可含有多个
➢ 函数构造器：var fn = new Function() // 传参必须使用字符串 evel()方法进行参数解析
➢ 匿名函数还可由事件驱动进行调用 document.querySelector('div').onclick = function() {alert('hello')} // ''hello''
➢ 可作为回掉函数进行调用 ➢ var fn = function(item){return item > 1};
JavaScript程序设计(第2版)第4章04.函数
在上面的代码中，调用函数的语句将字符串“第一个JavaScript函数程序”、“作者”和“zts”，分别 赋予变量statement1、statement2和statement3。运行结果如图4-16所示。
图4-16 函数的简单调用
2．在事件响应中调用函数 当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的 行为称为响应事件，在JavaScript语言中，将函数与事件相关联就完成了响应事件的过程。
//在页面中弹出对话框
函数的调用
函数定义后并不会自动执行，要执行一个函数需要在特定的位置调用函数，调用函数需要创 建调用语句，调用语句包含函数名称、参数具体值。
1．函数的简单调用 函 数 的定 义语 句通常被放在 HTML 文件的 <HEAD> 标记 中，而函 数 的 调 用 语 句通常被放在 <BODY>标记中，如果在函数定义之前调用函数，执行将会出错。 语法：
<script type="text/javascript"> var outter=10; function functionName(parameters1){ functionName(parameters2); } </script> functionName：递归函数名称。
在上述代码中可以看出，首先定义一个名为test()的函数，函数体比较简单，使 用alert()语句返回一个字符串，最后在按钮onClick事件中调用test()函数。当用户 单击提交按钮后将弹出相应对话框，运行结果如图4-17所示。
图4-17 在事件响应中调用函数
3．通过链接调用函数 函数除了可以在响应事件中被调用之外，还可以在链接中被调用，在<a>标签中的href标记中使 用“javascript:”关键字调用函数，当用户单击这个链接时，相关函数将被执行。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
函数定义时，还可用“…变量名”的方式动态接收用户传递的不确定数量的实参。
function transferParam(num1, ...theNums) {
theNums.unshift(num1); console.log(theNums);
一个确定形参
}
function transferParam(...theNums) { console.log(theNums);
✎ 4.1 函数的定义与调用
4. 【案例】字符串大小写转换
代码实现思路： ① 编写HTML表单，设置两个文本框和两个按钮，
文本框显示转换前后数据，按钮用于转换。 ② 为按钮添加点击事件，并利用函数deal()处理。 ③ 编写deal()函数，根据传递的不同参数执行不同
的转换操作。 ④ 将转换后的数据显示到对应位置。
✎ 4.1 函数的定义与调用
1. 初识函数
函数：用于封装一段完成特定功能的代码。 相当于将一条或多条语句组成的代码块包裹起来，用户在使用时只需关心参数和 返回值，就能完成特定的功能，而不用了解具体的实现。
✎ 4.1 函数的定义与调用
1. 初识函数
console.log(parseFloat('7.26e-2')); console.log(isNaN(' ')); console.log(parseInt('15.99'));
function transferParam() {
console.log(arguments.length);
示 例
console.log(arguments);
}
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
函数参数的设置，在ES6中提供了更灵活的使用方式，如设置形参的默认值等。
✎ 4.1 函数的定义与调用
1. 初识函数
除了使用内置函数外，JavaScript中还可以根据具体情况自定义函数，提高代码的 复用性、降低程序维护的难度。
函数的定义由以下4部分组成： ➢ 关键字function。 ➢ 函数名。 ➢ 参数。 ➢ 函数体。
function 函数名([参数1, 参数2, ……]) {
function greet(name, say = 'Hi, I\'m ') {
默
console.log(say + name);
认
值ห้องสมุดไป่ตู้
}
函数的形参在设置时，还可以为其指定默认值。当调用者未传递该参数时，函数 将使用默认值进行操作。
✎ 4.1 函数的定义与调用
多 学 一 招 含有默认值的参数与剩余参数
第4章 函数
• 函数的使用
JS
• 匿名函数
• 变量的作用域 • 闭包函数
✎
学习目标
1 掌握函数的使用方法
2
掌握变量的作用域
掌握匿名函数与闭
包函数 3
✎
目录
函数的定义与调用
☞点击查看本小节知识架构
变量的作用域
匿名函数
☞点击查看本小节知识架构
嵌套与递归
☞点击查看本小节知识架构
✎
目录
闭包函数
☞点击查看本小节知识架构
观察“内置函数”的使用
// 返回解析后的浮点数：0.0726 // 判断是否是NaN：false // 返回解析后的整数值：15
➢ parseFloat()用于返回解析字符串后的浮点数。 ➢ isNaN()判断给定参数是否为NaN，判断结果为是，返回true，否则返回false。 ➢ parseInt()用于返回解析字符串后的整数值。
}
无确定的形参
✎ 4.1 函数的定义与调用
3. 函数的调用
当函数定义完成后，要想在程序中发挥函数的作用，必须得调用这个函数。 函数的调用非常简单，只需引用函数名，并传入相应的参数即可。 函数声明与调用的编写顺序不分前后。
函数名称([参数1, 参数2, ……])
[参数1，参数2…]是可选的，用于表示形参列表，其值可以是零个、一个或多个。
✎ 4.2 变量的作用域
思考：声明变量后就可以在任意位置使用该变量嘛？
回答：不是。
举例：函数内var关键字声明的变量，不能在函数外访问。
function info() {
示例
var age = 18;
}
// 输出结果：Uncaught ReferenceError: age is not defined
function maxNum(a, b) {
a = parseInt(a);
b = parseInt(b);
示 例
return a >= b ? a : b;
}
✎ 4.1 函数的定义与调用
2. 参数设置
获取函数调用时传递的所有实参：适用于开发时函数体形参不确定的情况。 实现方式：利用arguments对象，在函数体内可获取函数调用时传递的实参。 其他操作：length属性可获取实参的总数，具体实参值可利用数组遍历方式。
函数体…… }
✎ 4.1 函数的定义与调用
1. 初识函数
➢ function：定义函数的关键字。 ➢ 函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能
以数字开头，且不能是JavaScript中的关键字。 ➢ 参数：是外界传递给函数的值，它是可选的，多个参数之间使用“,”分割。 ➢ 函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。 ➢ 返回值：在调用函数后若想得到处理结果，在函数体中可用return关键字返回。
在自定义函数时，即使函数的 功能实现不需要设置参数，小 括号“()”也不能够省略。
function greet() { console.log('Hello everybody!');
}
✎ 4.1 函数的定义与调用
2. 参数设置
有参函数：适用于开发时函数体内的操作需要用户传递数据的情况。 形参：指的就是形式参数，具有特定的含义，在定义有参函数时设置的参数。 实参：指的是实际参数，也就是具体的值，在函数调用时传递的参数。
✎ 4.1 函数的定义与调用
1. 初识函数
注意
函数的名称最好不要使用JavaScript中的保留字，避免在将来被用作关键字 导致出错。
✎ 4.1 函数的定义与调用
2. 参数设置
函数可以根据参数的设置分为以下两种：
无参函数
有参函数
✎ 4.1 函数的定义与调用
2. 参数设置
无参函数：适用于不需要提供任何数据，即可完成指定功能的情况。