BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数

4.2 函数

4.2.1 什么是函数

类似于Java中的方法，是完成特定任务的代码语句块

特点
- 使用更简单不用定义属于某个类，直接调用执行
分类
- 系统函数
- 自定义函数

4.2.2 常用系统函数

将字符串转换为整型数字

parseInt("字符串");

将字符串转换为浮点型数字

parseFloat("字符串");

从下标为0起，依次判断每个字符是否可以转换为一个有效数字

如果不是有效数字，则返回NaN，不再继续执行其他操作

如果是有效数字，则该函数将查看下标为1的字符，进行同样的测试，直到发现非有效数字的字符或全部检测完为止

检查其参数是否是非数字

isNaN(x);

通常，使用isNaN()函数检测parseInt()和parseFloat()的运算结果，判断它们表示的是否是合格的数字；

也可以使用isNaN()函数检测操作数是否有错误，例如：用0作为除数的情况

4.2.3 自定义函数

与 Java 语言一样，JavaScript中需要先定义函数，再调用函数

定义函数的方式

函数声明
函数表达式

4.2.4 函数声明

由关键字 function、函数名、一组参数及置于括号中的待执行的 JavaScript 语句组成

定义函数

function 函数名([参数1[, 参数2[, 参数3,…] ] ]) {// 参数是可选的//JavaScript语句;[return 返回值]// 可有可无
}

JavaScript是弱数据类型，对于函数参数没有类型检查和类型限定

调用函数

事件名＝"函数名([参数值1[, 参数值2[, 参数值3,…] ])";

一般和表单元素的事件一起使用

调用无参函数

定义并调用无参函数，输出5次“欢迎学习JavaScript”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input name="btn" onclick="study( )" type="button" value="显示5次欢迎学习JavaScript"/>
// 单击此按钮时，调用函数study( )，执行函数体中的代码
</body>
<script type="text/javascript">function study() {for (var i = 0; i < 5; i++) {document.write("<h4>欢迎学习JavaScript</h4>");}}// 定义无参函数study()
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7fBHZrSs-1681957325917)(./assets/image-20230420093013462.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUt8JZmJ-1681957325919)(./assets/image-20230420093029638.png)]

调用有参函数

键盘接收“欢迎学习JavaScript”输出行数，并按指定数字输出到网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input name="btn" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))"type="button"value="请输入显示欢迎学习JavaScript的次数"/>
</body>
</html>
<script type="text/javascript">function study(count) {for (var i = 0; i < count; i++) {document.write("<h4>欢迎学习JavaScript</h4>");}}// 使用系统函数prompt()接受行数，作为参数传递给自定义函数study()
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIbe6i1M-1681957325920)(./assets/image-20230420093311411.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ywK4Ciqb-1681957325920)(./assets/image-20230420093458717.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tkTGudgj-1681957325920)(./assets/image-20230420093506323.png)]

4.2.5 函数表达式

将函数赋给变量

定义函数

var 变量 = function([参数值1[, 参数值2[, 参数值3,…] ]) {//JavaScript语句;
};

调用函数

变量([参数值1[, 参数值2[, 参数值3,…] ]);

使用函数声明的方式定义两个函数名都为f1()的函数

<script>//函数声明function f1() {console.log("今天天气真好！");}f1();function f1() {console.log("今天天气好晴朗，处处好风光！");}f1();
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dl1Jgqyj-1681957325921)(./assets/image-20230420100122769.png)]

使用函数表达式方式定义两个函数名都为f2()的函数

<script>//函数表达式var f2 = function () {console.log("哇~");};f2();var f2 = function () {console.log("哇哈哈~");};f2();
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-280B8VJ9-1681957325921)(./assets/image-20230420100209252.png)]

使用函数声明方式定义两个同名的函数时，后面的函数将会覆盖前面的函数；

使用函数表达式方式定义同名的函数时，会从上到下，逐行执行代码，并输出结果

4.2.6 预解析

顾名思义就是提前解析代码，主要完成两项工作

变量的声明会提前
函数的声明也会被提前

先声明变量或声明函数，后在控制台输出结果

<script>console.log(num); //undefinedvar num = 10;// 结论1 预解析可以把变量的声明提前        f1();function f1() {var num = 100;console.log(num); //100}// 结论2 预解析可以把函数的声明提前
</script>

4.2.7 函数自调用

自定义函数分类

命名函数
匿名函数

(function() {//函数体
})();
// 声明并调用匿名函数

匿名函数的特点与好处

函数没有名字，在声明的同时便直接调用
同名函数之间不会有冲突

4.2.8 回调函数

将函数作为另一个函数的参数使用

<script>// 回调函数function f1(fn) {console.log("f1函数调用了");fn();}function f2() {console.log("f2函数调用了");}f1(f2);// 函数f2()作为函数f1()的参数
</script>

如果没有指定回调函数的名称，则称之为匿名回调函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-efSUqgEl-1681957325921)(./assets/image-20230420100752068.png)]

4.3 变量的作用域

根据变量作用范围不同，分类

局部变量

在函数内部声明的变量（必须使用var）
只能在函数内部访问它
可以在不同的函数中使用名称相同的局部变量

全局变量

在函数外声明的变量
网页的所有脚本和函数都能访问它

4.3.1 局部变量和全局变量

<script>var x = 10;// 全局变量function f1() {var y = 5;// 局部变量console.log(x);console.log(y);}f1();console.log(x);console.log(y);
// 在函数f1()外部输出局部变量y值时
// 会报错“y is not defined”</script>

4.3.2 局部变量与全局变量的区别

	局部变量	全局变量
作用域	仅作用在函数中	作用在整个脚本
声明位置	函数中	使用之前的任何位置
生存期	在函数运行以后被删除	在页面关闭后被删除

4.3.3 隐式全局变量

如果变量声明时，没有使用关键字var，则被称为隐式全局变量

var a1 = 1;  //全局变量
a2 = 2;      //隐式全局变量

如果在函数内部声明变量时，没有使用关键字var，则也是隐式全局变量

function f1() {num = 200;// 隐式全局变量
}
f1();
console.log( num );
// 函数外可以访问变量 num

4.3.4 隐式全局变量和全局变量的区别

声明全局变量a1和隐式全局变量a2

var a1=1;
a2=2;
delete a1;
delete a2;
console.log(typeof a1); //number
console.log(typeof a2); //undefined

隐式全局变量可以被删除，全局变量不可以被删除

4.3.5 作用域与块级作用域

作用域

是变量与函数的可访问范围
控制着变量与函数的可见性和生命周期

块级作用域

由花括号“ { } ”限定
所有的变量都定义在花括号内
变量从定义开始到花括号结束的范围内可以使用

使用场景

正常带有大括号的语句
条件语句
循环语句
函数

4.3.6 作用域链

Scope Chain

是JavaScript内部一种变量、函数查找机制
决定了变量和函数的作用范围

当执行函数时，先从函数内部寻找局部变量

如果内部找不到，则向创建函数的作用域寻找，依次向上
如果最终没有找到，通常会报错

<script>
var num=10
// <script>里定义的变量，是0级作用域
function f1() {var num=20;// 1级作用域function f2() {var num=30;// 2级作用域function f3() {var num=50;// 3级作用域console.log(num); }f3();}f2();
}
f1();
</script>

4.3.7 闭包

在函数外部读取函数内的局部变量

闭包（closure）

能够读取其他函数内部变量的函数
是将函数内部和函数外部链接起来的桥梁

实现步骤

在一个函数的内部，再定义一个函数
把内部的函数作为返回值

特性

函数嵌套
内部函数可以访问外部函数的变量
参数和变量不会被回收

最典型的应用

实现回调函数

使用闭包，在函数外部读取函数内的局部变量

<script>
function f1() {var num = 1;function f2() {alert(num);}//  函数f2()就是闭包// 内部函数中，访问外层函数的局部变量return f2;// 把内部函数f2()作为外层函数的返回值}
var result = f1();
result();
</script>

作用

可以读取函数内部的变量
让这些变量的值始终保存在内存中

缺点

在父函数外部，可以改变父函数内部变量的值
常驻内存，会增大内存使用量，使用不当很容易造成内

4.4 事件

事件（Event）是使用JavaScript实现网页特效的灵魂内容，浏览器会触发各种事件实现网页中的各种特效

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指针移到某元素上方
onmouseout	鼠标指针离开某元素上方
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数