首页 前端知识 BCSP-玄子前端开发之JavaScript jQuery入门CH02_JavaScript函数

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

2024-02-25 11:02:10 前端知识 前端哥 201 55 我要收藏

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 预解析

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

  1. 变量的声明会提前
  2. 函数的声明也会被提前
  • 先声明变量或声明函数,后在控制台输出结果
<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)

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

实现步骤

  1. 在一个函数的内部,再定义一个函数
  2. 把内部的函数作为返回值

特性

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

最典型的应用

  • 实现回调函数

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

<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函数

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2697.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!