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); //undefined
var 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函数
