作用域

发布日期: 2022-01-24

文章字数: 446

阅读时长: 2 分

<!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变量在 if switch while for 等会变为执行环境下的变量 如var a 属于立即执行函数下的变量，在外部引用会报错
        //例子1
        // (function () {
        //     if (true) {
        //         var a = 2;
        //     }
        //     console.log(a);
        // })()
        // // console.log(a);报错

        // //例子2
        // var b = 2
        // switch (b) {
        //     case 2:
        //         var c = 1;
        //         break;
        // }
        // console.log(c);//1

        // //作用域链 当立即执行函数中的e变量没有在函数作用域里找到会从全局调用
        // var d = 1;
        // var e = 1;
        // (function () {
        //     var d = 2;
        //     console.log(d);//2
        //     console.log(e)//1
        // })();
        // console.log(d)//1


        // //变量提升
        //例子1
        // var f = 1;
        // (function () {
        //     console.log(f);//undefined
        //     var f = 2;
        //     console.log(f);//2
        // })();
        // console.log(f)//1

        //例子2
        // if (a != 1) {
        //     a = 2
        // } else {
        //     var a = 3
        // }
        // console.log(a);//2

        //函数提升 函数提升比变量提升更优先
        //编写顺序
        // var g = 1;
        // (function () {
        //     console.log(g);//undefined
        //     var g = 2;
        //     console.log(g);//2
        //     console.log(fn())//3
        //     function fn() {
        //         return g + 1;
        //     }

        // })();
        // console.log(g)//1

        // //编译后的顺序
        // var g = 1;
        // (function () {
        //     function fn() {
        //         return g + 1;
        //     }
        //     var g;
        //     console.log(g);//undefined
        //     g = 2;
        //     console.log(g);//2
        //     console.log(fn())//3
        // })();
        // console.log(g)//1




        // //函数 因为函数在变量提升后面
        console.log(b());
        var a = 2;
        function b() {
            return a;
        }


        // var a;
        // a = 2;
        // function b() { }
        // console.log(a || b);



        // //例子2
        // //javascript 应用的是词法作用域 向函数定义的上一层找
        // //还有动态作用域 和this同概念

        // function test(fn) {
        //     const a = 1;
        //     fn()
        // }

        // const a = 2
        // function fn() {
        //     console.log('a', a)
        // }
        // test(fn)//2











    </script>
</body>

</html>