从零开始学前端：作用域、执行顺序 --- 今天你学习了吗？（JS：Day10）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：函数、封装 — 今天你学习了吗？（JS：Day9）

前言

毕设前端差不多了，可是后端才是重头戏啊喂！好难好难~

第十节课：作用域、执行顺序

一、作用域【ES5】

作用域：脚本的有效范围、作用范围。
分两大类

• 全局作用域（script）
• 局部（function）

1. 全局作用域

直接定义在scipt标签下的变量，称之为全局变量。script标签下的函数，称之为全局函数，直接在全局作用域内定义的变量为全局变量。

        var a = 123;
        alert(window.a);        //123
        function abc() { }
        alert(window.abc);      //function abc(){}

2. 函数（局部）作用域

例子：

        // 全局变量
        var num = 123;

        function fn() {
            // 局部变量
            var num = 666;

        }

        console.log(num);  //123   输出的是挂载到window的全局变量

但是如果注释掉全局变量，只输出num，发现也是拿不到局部变量的值，会报错：

当全局作用域与局部作用域都有定义变量的时候，局部作用域里面的值取就近值。

但是如果当里面先输出再定义时，输出为undefined

变量必须先定义，如果没有通过定义的情况，会出现此变量回挂载到顶层对象window中，对window造成污染。

//  上面图片左边又var，右边没有var
        function fn() {
            str = 'Coisini'
        }

        fn();
        console.log(str)  //Coisini

执行函数内的函数：

        var num1 = 123; function fn() {
            var num1 = 2;
            return function () {
                console.log(num1)
            }
        }
        var a = fn()
        a()    //2，相当于执行函数内的函数

二、解析顺序

• 编译阶段
  在作用域内声明的‘变量会被提升到作用域的顶部’且对其赋值‘undefined’，这个过程称之为‘变量提升’，上面代码等同于下面（‘还可以访问父级的参数’）
• 函数提升
  在作用域内的函数定义函数会被提升到作用于的顶部，其值为其函数本身，这个过程称之为函数提升，上面代码等同于下面

解析顺序【编译模式】：
1. 编译阶段：
找变量声明，函数声明；
2. 执行阶段：
赋值，读取值，for，if，delete；

eg：

        console.log(a);
        var a = 3;
        var a = 2;
        console.log(a);

结果：

解析顺序：

            1.编译阶段：
            var a ;
            var a ;
            2.执行阶段：
            console.log(a);//undefined
            a = 3;
            a = 2;
            console.log(a);//2

三、解析顺序练习

1. 第1题

        console.log(num);  //undefined 
        var num = 123;

        /*
            定义：
                var num;
            执行：
                console.log(num) //undefined
                num = 123;
        */

2. 第2题

        function fn() {
            console.log(1)
        }
        var fn = 2;
        console.log(fn)    //2


        /*
        变量出现重复的情况，函数的优先级比var的优先级高！
        两个fn，相当于重新定义，重新赋值，所以赋值发生变化
            定义：
                function fn
                var fn 
            执行
                console.log(fn) //2
        */

对比于：
变量出现重复的情况，函数的优先级比var的优先级高

        function fn() {
            console.log(1)
        }
        var fn;
        console.log(fn)  // function fn(){console.log(1)}
        /*
            变量出现重复的情况，函数的优先级比var的优先级高！
            两个fn，相当于重新定义，重新赋值，所以赋值发生变化
            定义：
                function fn
                var fn 
            执行
                console.log(fn) //2
        */

3. 正式练习开始！第3题

        var a = 5;
        function fn() {
            console.log(a);   //undefined
            var a = 10;
            console.log(a)    //10
        }
        fn();

执行顺序：

            定义：
                var a
                function fn
            执行：
                fn() [此处又开辟了一个作用域]=> 
                    定义：
                        var a 
                    执行：
                        console.log(a) //undefined
                        a = 10;
                        console.log(a)   //10

4. 第4题

        console.log(a)
        var a = 10;
        var a = [];
        function a() {
            console.log("fn")
        }
        console.log(a)

执行顺序：

            定义：
                var a
                var a
                function a
            执行：
                console.log(a)  //function a(){console.log("fn")}
                a = 10
                a = []
                console.log(a)   //[]

5. 第5题

        console.log(a)
        a();
        var a = 1;
        console.log(a)
        var a = [];
        function a() {
            var b = 1;
            console.log("fn")
        }
        a();
        console.log(a)

执行顺序：

            定义：
                var a
                var a
                function a
            执行：
                console.log(a)  //function a(){var b=1;console.log("fn")}
                a()   // fn
                a = 1
                console.log(a) // 1
                a = []
                a() => error
                console.log(a)  //[]

6. 第6题

        fn()
        console.log(a)
        var a = 0;
        console.log(a)
        function fn() {
            var a = 1;
            // a = 1;时，输出1，而不是undefined
        }

执行顺序：

            定义：
                var a
                function fn()
            执行：
                fn() => 
                    定义：
                        var a
                    执行：
                        a = 1
                console.log(a) //undefined
                a = 0;
                console.log(a) //0

7. 第7题

        fn()()
        var a = 0;
        function fn() {
            console.log(a)
            var a = 3;
            function b() {
                console.log(a)
            }
            return b;
        }

执行顺序：

            定义：
                var a
                function fn
            执行：
                fn()()
                    fn() => 
                        定义：
                            var a
                            funtion b
                        执行：
                            console.log(a) //undefined
                            a = 3
                    fn()() => b()
                        定义：
                        执行：
                        console.log(a) //3
                a = 0

8. 第8题

        function fn1() {
            var num = 10;
            function fn2() {
                console.log(num)
            }
            return fn2;
        }
        console.log(fn1())
        var b = fn1();
        b();

执行顺序：

            定义：
                function fn
                var b
            执行：
                console.log(fn1())  =>  // function fn2(){console.log(num)}   //看return值
                    fn1()=>
                        定义：
                            var num
                            function fn2
                        执行：
                            num = 10;
                            return fn2;
                fn1()=>
                    定义：
                        var num
                        function fn2
                    执行：
                        num = 10;
                        return fn2;

                b = fn1() = 返回return  = fn2   
                b() = fn2() =>  10

四、练习题

        a()
        function a() {
            var fn = function () {
                console.log(123)
            }
            return fn1()
        }
        a()
        var a = 0;
        var a = 0;
        function fn1() {
            console.log(a)
            var a = 1
            return a;
        }
        console.log(fn1())
        console.log(a)
        fn1()()

解答：

       a()
        function a() {
            var fn = function () {
                console.log(123)
            }
            return fn1()
        }
        a()
        var a = 0;
        function fn1() {
            console.log(a)    //undefined
            var a = 1         //函数内有定义，就近原则
            return a;
        }
        console.log(fn1())    //---函数执行，即fn1()返回的是return的值：a
        console.log(a)
        fn1()()               //---即a()


        /*
            注意：
                什么时候就近原则，什么时候用函数优先级比var的优先级高
                // 变量出现重复的情况，函数的优先级比var的优先级高,所以上面的函数优先
                // 函数内外均有定义时，执行函数时取的是函数内的定义，即就近原则
            定义：
                function a
                var a
                function fn1 
            执行：
                a()  =>  函数执行，重复定义，函数优先
                    定义：
                        var fn
                        function
                    执行：        
                    fn = function(){console.log(123)}   x函数并不执行，没有fn()，执行括号,所以不执行
                    return fn1()   
                        fn1() =>
                            定义：
                                var a
                            执行：
                                console.log(a)  -- 就近原则：   //undefined
                                a = 1
                                return a;       ---a = 1
                a() =>   函数执行，不受局部变量的影响
                    定义：
                        var fn
                        function
                    执行：
                    fn = function(){console.log(123)}   x函数并不执行，没有fn()，执行括号,所以不执行
                    return fn1()  
                            fn1() =>
                            定义：
                                var a
                            执行：
                                console.log(a)  -- 就近原则：   //undefined
                                a = 1
                                return a;       ---a = 1
                a = 0
                console.log(fn1()) =>
                    fn1() => 
                        定义：
                            var a
                        执行：
                            console.log(a)     -- 就近原则：     //undefined
                            a = 1
                            return a            -- a = 1        
                    console.log(fn1()) => console.log(a)        // 1
                console.log(a)                                  // 0
                fn1()() =>
                    fn1() =>
                        定义：
                            var a
                        执行：
                            console.log(a)       ---就近原则    //undefined 
                            a = 1
                            return a            ---1
                    fn1()() => a() => 即1() =>                  //报错,a不是函数,即fn1()不是函数
        */

预习：从零开始学前端：垃圾回收机制，闭包，案例 — 今天你学习了吗？（JS：Day11）