JS 基础知识 作用域 预解析

目标：

• 能说出JS的两种作用域
• 能够区分全局变量和局部变量
• 能够说出如何在作用域链中查找变量的值

1. 作用域

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

• 全局作用域
• 局部作用域

<script>
        // 1. 全局作用域： 整个script标签  或者一个单独的JS文件
        var num = 2;

        // 2. 局部作用域（函数作用域）  在函数内部，只在函数内部起效果和作用
        function fu(){
            // 局部作用域
            var num=3;  //这里的num与外面的num不冲突
        }
        fu();
    </script>

1.1 变量作用域的分类 

• 全局变量
• 局部变量

<script>
        // 1. 全局变量： 在全局作用域下的变量，在全局下都可以使用
        // 注意：如果在函数内部，没有声明直接赋值的变量，在全局中都可以使用
        var num = 2;
        console.log(num);//2
        function fu() {
            console.log(num);  //2
        }
        fu();

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

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

JS没有块级作用域： 

 <script>
        // js没有块级作用域，现阶段只有：全局作用域，局部作用域
        // 在es6的时候JS才新增了块级作用域
        // 外面的是不能调用里面的num的
        if (2 < 4) {
            var num = 12;
        }
        console.log(num);
    </script>

1.2 作用域链

 <script>
        // 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值
        var num = 10;
        function fn() {   //外部函数
            var num = 20;
            function fun() {  //内部函数
                // 就近原则，先往上一级查找有没有num变量，有就直接输出，没有就继续往上一级查找
                console.log(num);  //20   内部函数可以访问外部函数的变量
            }
            fun();
        }
        fn();
    </script>

2. 预解析

目标：

• 知道解析器运行JS分为哪两步
• 说出变量提升的步骤和运行过程
• 说出函数提升的步骤和运行过程

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

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


        // 2.
        console.log(num);  //undefined
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);   
        // num = 10;


        // 3.
        fu();
        function fu() {
            console.log(11);  //11
        }


        // 4. 
        fun();  //报错
        var fun = function () {
            console.log(22);
        }
        // 函数表达式 调用必须写在函数表达式最下面
        // 相当于执行了以下代码
        var fun;
        fun(); //把这行代码放到最后面就不会报错了
        fun = function () {
            console.log(22);
        }

        // （一）预解析：JS引擎会把JS里面所有的var 还有function 提升到当前作用域的最前面
        // （二）代码执行：按照代码书写的顺序从上往下执行
        // 预解析分为变量预解析（变量提升） 和函数预解析（函数提升）
        // （1）变量提升  就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作
        // （2）函数提升  就是把所有的函数声明提升到当前作用域的最前面，不调用函数

    </script>

相关案例：

<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 sum = 10;
        function fn() {
            console.log(sum);
            var sum = 20;
            console.log(sum);
        }
        fn();
        // 相当于执行了以下代码
        var sum;
        function fn() {
            var sum;
            console.log(sum);  //undefined
            sum = 20;
            console.log(sum);  //20
        }
        sum = 10;
        fn();


        // 3.
        var a = 18;
        f1();
        function f1() {
            var b = 9;
            console.log(a);
            console.log(b);
            var a = '123';
        }
        // 相当于以下代码
        var a;
        function f1() {
            var b;
            var a;
            b = 9;
            console.log(a);  //undefined
            console.log(b);  //0
            a = '123';
        }
        a = 18;
        f1();


        // 4.
        f2();
        console.log(c);
        console.log(b);
        console.log(a);
        function f2() {
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 相当于以下代码
        function f2() {
            var a;
            a = b = c = 9;
            // var a = b = c = 9; //相当于 var a = 9;b = 9;c = 9  b和c只赋值没声明，当做全局变量来用            
            console.log(a);//9    //与集体声明不一样 var a = 9,b = 9,c = 9   这样才是a,b,c都有声明和赋值
            console.log(b);//9
            console.log(c);//9
        }
        f2();
        console.log(c);//9
        console.log(b);//9
        console.log(a);//报错
    </script>