js 作用域及期预解析过程案例 

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

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

    </style>
</head>

<body>
    <div class="container">
    </div>
    <script>
        //js变量作用域只有全局作用域 和局部作用域 
        //js作用域链 内部方法可以访问外部方法的变量 一层一层的查找(就近原则)
        var num = 10 //全局变量

        function fun() {
            num = 20 //局部变量
            console.log(num) //20
        }
        fun()
        for (var i = 0; i < 12; i++) { //没有块级作用域 es6才有

        }
        console.log(i) //12 有块级作用域 所以可以访问变量i 

        //js引擎运行js代码分为两步：预解析和代码执行
        //预解析：会把js里面所有的var（变量预解析或变量提升，只提升声明不提升赋值到当前作用域） 还有function提升（函数预解析或函数提升）到当前作用域的最前面 
        //代码执行： 按照代码顺序从上往下执行
        // example 1
        // console.log(b) //报错 b is not defined
        // example 2
        console.log(a) //undefined 此example两行代码js预解析过程相当于 1、 var a; 2、 console.log(a) 3、 a=10
        var a = 10
            // example 3
        fun() //11
        function fun() {
            console.log(11)
        }
        // example 4
        //fun1() //fun1 is not function  此example两行代码js预解析过程相当于 1、 var fun1; 2、 fun1()  3、 fun1=function(){ console.log(22) }
        var fun1 = function() {
                console.log(22)
            }
            // example 5
        var c = 22;
        fun2() // 此example两行代码js预解析过程相当于 1、 var c; 2、 function fun2(){ var c;console.log(c);c=33}  3、 c=22 4、fun2()
        function fun2() {
            console.log(c) //undefined
            var c = 33
        }
        // example 6 
        var d = 44

        function fun3() {
            console.log(d) //undefined
            var d = 55
            console.log(d) //55
        }
        fun3()
            //example 6相当于以下代码
            // var d;
            // function fun3(){
            //     var d;
            //     console.log(d);
            //     d=55;
            //     console.log(d)
            // }
            // d=44
            // fun3()
            // example 7
        var e = 18

        function fun4() {
            var f = 9;
            console.log(e); //undefined
            console.log(f); //9
            var e = '123'
        }
        fun4()
            //example 7相当于以下代码
            // var e;
            // function fun4(){
            //     var f;
            //     var e;
            //     f=9;
            //     console.log(e);
            //     console.log(f);
            //     e='123'

        // }
        // e=18
        // fun4()
        //example 8相当于以下代码
        fun5()
        console.log(x)
        console.log(y)
        console.log(z)

        function fun5() {
            var x = y = z = 99
            console.log(x)
            console.log(y)
            console.log(z)
        }
        //example 8相当于以下代码
        // function fun5() {
        //     var x ;
        //     x= y = z = 99 //相当于y z是全局变量
        //     console.log(x) //99
        //     console.log(y) //99
        //     console.log(z) //99
        // }
        // fun5()
        // console.log(x)  // 报错x is not defined
        // console.log(y)
        // console.log(z)
    </script>
</body>

</html>

　　

posted @ 2020-05-07 16:45  howhy  阅读(78)  评论(0)    收藏  举报