js作业（8-作用域和预解析）

最新推荐文章于 2024-10-18 17:51:23 发布

咋的啥名都用不了呢~

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量44

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63492023/article/details/129523006

版权

JavaScript作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.javaScript作业域：代码名字（变量）在某个范围内起作用和效果 目的：提高程序的可靠性
        // 减少命名冲突
        // 2.js的作用域（es6）之前：全局作用域 局部作用域
        // 3.全局作用域：整个script标签 or 一个单独的js文件
        var num = 10;
        var num = 30;
        console.log(num);
        // 4.局部作用域：（函数作用域） 这个代码名字只在函数内部起效果
        function fn() {
            // 局部作用域
            var num = 20;
            console.log(num);
        }
        fn();
    </script>
</body>

</html>

JavaScript没有块作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // js中没有块级作用域 js的作用域：全局作用域 局部作用域 
        // 在es6的新增的块级作用域
        // 块级作用域 {}   if {}   for {}
        // java
        // if(xx){
        //     int num = 20;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);
    </script>
</body>

</html>

作用域链

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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);
            }
            fun();
        }
        fn();
        // fun(); 错误的调用
    </script>
</body>

</html>

作业域案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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); //站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();
        // 案例2：结果是几？
        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); //a的值？ 4
                    console.log(b); //b的值？ 22
                }
            }
        }
        fn1();
    </script>
</body>

</html>

预解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1问
        // console.log(num); // undefined

        // 2问
        console.log(num); // undefined 坑 1
        var num = 10;
        // 相对于执行了一下代码
        // var num;
        // console.log(num);
        // num = 10;

        // 3问
        fn();

        function fn() {
            console.log(11); // 11
        }

        // 4问
        // fun(); 放这报错 坑2
        var fun = function() {
                console.log(22);
            }
            // 函数表达式调用必须写在函数表达式的下面
            // 相对于执行了一下代码
            // var fun;
            // fun();
            // fun = function() {
            //     console.log(22);
            // }

        // 1. (js引擎)JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行
        // (1) 预解析 js引擎会把 js里面所有的 var 还有 function 提升到当前作业域的最前面
        // (2) 代码执行 按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
        // (1) 变量提升 把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
        // (2) 函数提升 把所有的函数声明提升到当前的作用域最前面 不调用函数
    </script>
</body>

</html>

预解析案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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();

        // 案例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
            num = 20;
            console.log(num); //20
        }
        num = 10;
        fn();

        // 案例3
        // var a = 10;
        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
        //     a = '123';
        // }
        // a = 18;
        // f1();

        // 案例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;
        //     a = b = c = 9;
        // 相对于 var a = 9;b = 9;c = 9; b 和 c 没有 var 声明 当全局变量看
        // 集体声明 var a = 9,b = 9,c = 9;
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }
        // f1();
        // console.log(c);
        // console.log(b);
        // console.log(a);
    </script>
</body>

</html>