JavaScript学习总结（作用域、JS预解析）

最新推荐文章于 2024-05-15 20:43:52 发布

Qinqin.J

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量92

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/2202_75688394/article/details/132917407

版权

一、作用域

1、作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果  目的是为了提高程序的可靠性更重要的是减少命名冲突
        // 2. js的作用域（es6）之前：全局作用域 局部作用域
        // 3. 全局作用域：整个script标签 或者是一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);  // 结果为：30

        // 4. 局部作用域 在函数内部就是局部作用域 这个代码的名字只是在函数内部起效果和作用
        function fn(){
            // 局部作用域
            var num = 20;
            console.log(num);  // 结果为：20
        }
        fn();  // 调用
    </script>
</body>
</html>

二、变量的作用域

1、变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 变量的作用域：根据作用域的不同，变量可以分为全局变量和局部变量
        // 1. 全局变量：在全局作用域下的变量  在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10;  // num就是一个全局变量
        console.log(num);  //结果为：10

        function fn() {
            console.log(num);  //结果为：10
        }
        fn();

        // 2. 局部变量：在局部作用域的变量  后者在函数内部的变量就是局部变量
        // 注意：函数的形参也可以看做是局部变量
        function fun() {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        console.log(num2);  //结果为：20

        // 3. 从执行效率来看全部变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源
    </script>
</body>
</html>

2、全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

3、局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形象实际上就是局部变量

4、全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码运行结束后，就会被销毁，因此更节省内存空间

5、JS 没有块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // js中没有块级作用域 js的作用域：全局作用域 局部作用域 现阶段我们js 没有块级作用域
        // 我们js 也是 es6 的时候新增的块级作用域
        // 块级作用域{} if{} for{}
        // java
        // if(xx) {
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);  //结果为：10
    </script>
</body>
</html>

三、作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就可以诞生一个作用域
根据在内部可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 作用域链：内部函数访问外部函数变量，采取的是链式查找的方式来决定取那个值 这种结构我们成为作用域链 就近原则
        var num = 10;

        function fn() {  // 外部函数
            var num = 20;

            function fun() {  // 内部函数
                console.log(num);
            }
            fn();
        }
        fn();
    </script>
</body>
</html>

案例1：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例1：结果是几？
        function f1() {
            var num = 123;

            function f2() {
                var num = 0;
                console.log(num);  //结果为：123
            }
            f2();
        }
        var num = 456;
        f1();
    </script>
</body>
</html>

案例2：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = 1;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2() {
                var a = 3;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a);  //结果为：4
                    console.log(b);  //结果为：22
                }
            }
        }
        fn1();
    </script>
</body>
</html>

四、JavaScript 预解析

1、预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1问
        // console.log(num);
        // 2问
        console.log(num);  // undefined 
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;

        // 3问
        fn(); 

        function fn() {
            console.log(11);  //结果为：11
        }
        // 4问
        // fun();  // 报错
        var fun = function() {
            console.log(22);  //结果为：22
        }
        fun();
        //函数表达式 调用必须写在函数表达式的下面
        // 相当于执行了以下代码
        // var fun;
        // fun();
        // fun = function() {
        //     console.log(22);
        // }
        
        // 1. 我们js引擎运行js 分为两步： 预解析 代码运行
        // (1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
        // (2). 代码执行 按照代码书写的顺序从上往下执行

        // 2. 预解析分为 变量预解析 (变量提升) 和 函数预解析(函数提升)
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    </script>
</body>
</html>

2、预解析案例

案例1：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 预解析案例
        // 案例1
        var num = 10;
        fun();

        function fun() {
            console.log(num);  // 结果为：undefined
            var num = 20;
        }
        // 相当于执行了以下操作
        // var num;

        // function fun() {
        //     var num;
        //     console.log(num);
        //     num = 20;
        // }
        // num = 10;
        // fun();
    </script>
</body>
</html>

案例2：结果是几？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例2
        var num = 10;

        function fn() {
            console.log(num);  //结果为：undefined
            var num = 20;
            console.log(num);  //结果为：20
        }
        fn();
        // 相当于以下代码
        var num;
        function fn() {
            var num
            console.log(num);  //结果为：undefined
            var num = 20;
            console.log(num);  //结果为：20
        }
        num = 10;
        fn();
    </script>
</body>
</html>

案例3：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例3
        var a = 18;
        f1();

        function f1() {
            var b = 9;
            console.log(a);  // 结果为：undefined
            console.log(b);  // 结果为：9
            var a = '123'
        }
        // 相当于以下代码
        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);  // 结果为：undefined
            console.log(b);  // 结果为：9
            var a = '123'
        }
        a = 18;
        f1();
    </script>
</body>
</html>

案例4：结果是几？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 案例4
        f1();
        console.log(c);  // 结果为：9
        console.log(b);  // 结果为：9
        console.log(a);  // 报错

        function f1() {
            var a = b = c = 9;
            console.log(a);  // 结果为：9
            console.log(b);  // 结果为：9
            console.log(c);  // 结果为：9
        }
        // 以下代码
        function f1() {
            var a;
            var a = b = c = 9;
            // 相当于  var a = 9; b = 9; c = 9;  b和c 直接赋值 没有var声明 当全局变量看
            // 集体声明 var a = 9, b = 9, c = 9;
            console.log(a);  //结果为：9
            console.log(b);  // 结果为：9
            console.log(c);  // 结果为：9
        }
        f1();
        console.log(c);  // 结果为：9
        console.log(b);  // 结果为：9
        console.log(a);  // 报错
    </script>
</body>
</html>