js解析顺序和作用域

一、 javascript解析顺序

1. （定义）先解析var、function、参数；
   a) 该步骤的var只定义变量，后面的 = 赋值不解析
   b) 该步骤的函数只定义函数，函数的执行不解析
   c) 重名的只留一个，var和函数重名函数优先
2. （执行）再从上至下执行其他代码。

二、 作用域

1. 最大的作用域为script标签；
2. 遇到函数执行产生新的作用域；
3. 产生新的作用域后同样按照定义-执行的规则解析该作用域的代码；
4. 子作用域可以访问父作用域的参数和变量，反之不行；
5. 每个作用域要访问变量时，先从自身找，找不到再往上一级找。

关于作用域的习题

<script type="text/javascript">
            
            /*  1
                alert( a );
                var a = 10;
                alert( a );
                a(); 
                function a(){ 
                    alert(2);
                };
            
            
            
                1 找
                    //a = und
                    //a = function(){
                        alert( 2 );
                    }
                    a = 10;
                2 执行
                    alert( a ); -> 函数块
                    a = 10; 
                    alert( a );  -> 10
                    a(); -> 10(); 报错
            */
            
            /*  2
                alert( a );  
                var a = 10;  

                alert( a ); 
                function a(){alert(20)};

                alert( a ); 
                var a = 30; 

                alert( a );

                function a(){alert(40)};
                alert( a ); 
                

            
                1 找 var 定义函数 参数
                    //a = und;
                    //a = function a(){alert(20)};
                    //a = und;
                    //a = function a(){alert(40)};
                    //a = 10;
                    a = 30
                2 执行
                    alert( a );  -> 函数块
                    a = 10;   
                    alert( a );  -> 10
                    alert( a );  -> 10
                    a = 30; 
                    alert( a );  -> 30
                    alert( a );  -> 30
            */
            
            
            /*  3
                a();
                var a = function(){alert( 1 );}
                a();
                function a(){alert(2);}
                a();
                var a = function b(){alert(3);}
                a();
            
            
                1 找 var 定义函数 参数
                    //a = und;
                    //a = function a(){alert(2);}
                    //a = und
                    //a = function(){alert( 1 );}
                    a = function b(){alert(3);}
                2 执行
                    a(); -> 新的作用域：
                                        1 找 var 定义函数 参数
                                            
                                        2 执行
                                            alert(2); -> 2
                    a(); -> 新的作用域： 
                                        1 找 var 定义函数 参数
                                            
                                        2 执行
                                            alert( 1 ); ->1
                    a(); -> 新的作用域： 
                                        1 找 var 定义函数 参数
                                            
                                        2 执行
                                            alert( 1 ); ->1
                    a(); -> 新的作用域： 
                                        1 找 var 定义函数 参数
                                            
                                        2 执行
                                            alert( 3 ); ->3
            */
            /*  4
                var a = 0;
                function fn(){
                    alert( a );
                    var a = 1;
                    alert( a );
                }
                fn();
            
            
                1 找 var 定义函数 参数
                    a = und; -> a=0
                    fn = function fn(){
                        alert( a );
                        var a = 1;
                        alert( a );
                    }
                2 执行
                    a = 0;
                    fn();   -> 新的作用域： 
                                            1 找 var 定义函数 参数
                                                a = und; -> a = 1
                                                
                                            2 执行 
                                                alert( a ); -> und
                                                a = 1;
                                                alert( a ); ->  1
            */

            /*  5

                fn();
                alert(a)
                var a = 0;
                alert(a);
                function fn(){
                    var a = 1;
                }



            
                1 找 var 定义函数 参数
                    a = und; -> a = 0;
                    fn = function fn(){
                        var a = 1;
                    }
                2 执行
                    fn(); -> 新的作用域：
                                        1 找 var 定义函数 参数
                                            a = und; -> a =1;
                                        2 执行
                                            a = 1;
                    alert(a);  -> und
                    a = 0;
                    alert(a);  -> 0
            */              

            /*  6
              
                //alert( fn() );  //结果 函数块
                fn()();
                var a =0;
                function fn(){
                    alert(a);
                    var a =3;
                    function c(){
                        alert(a)
                    }
                    return c;
                }
            
            
                1 找 var 定义函数 参数
                    a = und; -> a = 0;
                    fn = function fn(){
                        alert(a);
                        var a =3;
                        function c(){
                            alert(a)
                        }
                        return c;
                    }
                2 执行
                    fn(); -> 新的作用域：
                                        1 找 var 定义函数 参数
                                            a = und; -> a = 3;
                                            c = function c(){
                                                alert(a)
                                            }
                                        2 执行
                                            alert(a);  -> und;
                                            a =3;
                                            return c;
                                                c = function c(){
                                                    alert(a)
                                                }();
                    a =0;  
            */


            /*  7
                //alert( fn() );  und
                //var b = und;
                //alert( b ); // und
                // 这是就是接收 结果

                fn( );
                var a =0;
                function fn(){  // 有名字的函数 
                    alert(a);
                    var a =3;
                    function c(){
                        alert(a)
                    }
                    return c();
                }
            
            
                1 找 var 定义函数 参数
                    a = und;
                    fn = function fn(){
                        alert(a);
                        var a =3;
                        function c(){
                            alert(a)
                            
                        }
                        return c();
                    }
                2 执行
                    fn();   -> 新的作用域：在解析的时候分为二个步骤
                                        1 找 var 定义函数 参数
                                            a= und -> a = 3
                                            c =function c(){
                                                alert(a)
                                            }
                                        2 执行
                                        alert(a); -> und
                                        a =3;
                                        c(); -> 新的作用域：在解析的时候分为二个步骤
                                            1 找 var 定义函数 参数
                                                
                                            2 执行
                                            过程：alert(a); -> 3
                                            结束：如果没return,默认返回und
                                        return c();
                                            
            */

            
            /*   8
                var a = 1;

                function fn(a){
                    alert( a );
                    a ++;
                    alert( a );
                }
                fn(a);

                alert( a );
            

            
                1 找 var 定义函数 参数
                    a = und ->  a= 1
                    fn = function fn(a){  函数代码块
                        alert( a );
                        a ++;
                        alert( a );
                    }
                2 执行
                    a = 1; 
                    fn(1);  1 找 var 定义函数 参数
                                a = und; -> a = 1 -> a = 2
                            2 执行
                                a = 1;
                                alert( a );  -> 1
                                a ++; a = a+1; a = 1+1 => a = 2
                                alert( a ); -> 2
                                
                    alert( a );  -> 1
            */
            
            
            





            /*  9

                var x = 5;
                a();
                function a(){
                    alert( x );
                    var x = 10;
                }
                alert( x )
                

            
                1 找 var 定义函数 参数
                    x = und; -> x =5;
                    a = function a(){
                        alert( x );
                        var x = 10;
                    }
                2 执行
                    x = 5; 
                    a();    1 找 var 定义函数 参数
                                x = und  -> a =10
                            2 执行
                            alert( x );  -> und
                            x = 10;
                    alert( x )  ->  5
            */

            
            /*  10
                a();
                function a(){
                    alert( x );
                    var x = 10;
                }
                alert( x )

            
            
                1 找 var 定义函数 参数
                    a = function a(){
                        alert( x );
                        var x = 10;
                    }
                2 执行
                    a();    
                            1 找 var 定义函数 参数
                                x = und; -> a =10
                            2 执行
                                alert( x );  -> und
                                x = 10; 
                    alert( x )
            */

            

            
            /*  11
                function a(){
                    alert( 1 )
                }
                var a;
                alert( a )
            
            
                1 找 var 定义函数 参数
                    //a = und;
                    a = function a(){
                        alert( 1 )
                    }
                2 执行
                    alert( a )
            */


            
            /*  12

                alert( a );
                var a = 10;
                alert( a );
                function a(){
                    alert( 20 );
                }
                alert( a );
                var a = 30;
                alert( a );
                function a(){
                    alert( 40 );
                }
                alert( a );

            
                1 找 var 定义函数 参数
                    //a = und;
                    //a = function a(){
                        alert( 20 );
                    }
                    //a = und;
                    //a = function a(){
                        alert( 40 );
                    }
                    //a = 10;
                    a = 30
                2 执行
                    alert( a );  -> 函数块
                    a = 10; 
                    alert( a );  -> 10
                    alert( a );  -> 10
                    a = 30; 
                    alert( a );  -> 30
                    alert( a );  -> 30
            */

            /*  13
            
                alert( a );
                var a = 10;
                alert( a );
                function a(){
                    alert( 20 );
                }
                var a= 5;
                alert( a );
                a( );
                alert( a );
                function a(){
                    alert( 40 );
                }
                alert( a );
                    
            
            
                1 找 var 定义函数 参数
                    //a = und;
                    //a = function a(){
                        alert( 20 );
                    }
                    //a = und
                    //a = function a(){
                        alert( 40 );
                    }
                    a = 10;
                    a = 5
                2 执行
                    alert( a );  -> 函数块
                    a = 10;  
                    alert( a );  -> 10
                    a= 5;
                    alert( a );  -> 5
                    a( );  -> 5();
            */

            
            /*  14
                a();
                var a = function(){
                    alert( 1 );
                }
                a();
                function a(){ 
                    alert( 2 )
                }
                a();
                var a = function(){
                    alert( 3 )
                }
                a();

                
                表达式 会 重新赋值
                1 找 var 定义函数 参数
                    //a = und
                    //a = function a(){ 
                        alert( 2 )
                    }
                    //a = und;
                    //a = function(){
                        alert( 1 );
                    }
                    a = function(){
                        alert( 3 )
                    }
                2 执行
                    a();  -> 2
                    a = function(){
                        alert( 1 );
                    }
                    a();  ->  1
                    a();  ->  1
                    a = function(){
                        alert( 3 )
                    }
                    a();  ->  3
            */
            
            /*  15
                var a = 0;
                function fn(){
                    alert( a );
                    var a = 1;
                    alert( a);
                }
                fn();
                alert( a );
            
            
            
                1 找 var 定义函数 参数
                    a = und;  ->  a = 0
                    fn = function fn(){
                        alert( a );
                        var a = 1;
                        alert( a);
                    }
                2 执行
                    a = 0;
                    fn();   1 找 var 定义函数 参数
                                a = und -> a= 1
                            2 执行
                                alert( a );  -> und
                                a = 1; 
                                alert( a);  -> 1
                    alert( a ); -> 0
            */


            /*  16
                fn();
                alert( a );
                var a = 0;
                alert( a );
                function fn(){
                    var a = 1;
                }

            
                1 找 var 定义函数 参数
                    a = und -> a = 0
                    fn = function fn(){
                        var a = 1;
                    }
                2 执行
                    fn(); 
                    alert( a );  ->  und
                    a = 0; 
                    alert( a );  ->  0
            */
            

            /*  17
                fn();
                alert( a );
                var a = 0;
                alert( a );
                function fn(){
                    a = 1;
                }
            
            
                1 找 var 定义函数 参数
                    a = und  ->  a = 1 -> a = 0
                    fn = function fn(){
                        a = 1;
                    }
                2 执行
                    fn();  新的作用域 
                                        1 找 var 定义函数 参数
                                            
                                        2 执行
                                            a = 1;
                    alert( a );  -> 1
                    a = 0; 
                    alert( a );  -> 0
            */
            
            /*  18
                fn()();
                var a = 0;
                function fn(){
                    alert( a );
                    var a = 3;
                    function c(){
                        alert( a );
                    }
                    return c;
                }
            
            
                1 找 var 定义函数 参数
                    a = und;
                    fn = function fn(){
                        alert( a );
                        var a = 3;
                        function c(){
                            alert( a );
                        }
                        return c;
                    }
                2 执行
                    fn();   1 找 var 定义函数 参数
                                a= und; -> a = 3
                                c = function c(){
                                    alert( a );
                                }()
                            2 执行
                                alert( a ); ->  und
                                a = 3; 
                                return c;
                    fn()();
            */
            
            var a = 5;
            function fn(){
                var a =10;
                alert( a );
                function b(){
                    a ++;
                    alert( a );
                }
                return b;
            }

            var c = fn();
            c();
            fn()();
            c();
            
            console.log( a )

            /*
                1 找 var 定义函数 参数
                    a = und -> a = 5
                    fn = function fn(){
                        var a =10;
                        alert( a );
                        function b(){
                            a ++;
                            alert( a );
                        }
                        return b;
                    }
                    c = und   ->  
                    c = function b(){
                            a ++;
                            alert( a );
                        }
                    

                2 执行
                    a = 5;
                    var c = fn();
                        fn();  1 找 var 定义函数 参数
                                    a = und -> a = 10
                                    b = function b(){
                                        a ++;
                                        alert( a );
                                    }
                                2 执行
                                    a =10;
                                    alert( a );  -> 10
                                    return b;
                    c = fn();  ->
                                c = function b(){
                                        a ++;
                                        alert( a );
                                    }()
                    c();    1 找 var 定义函数 参数
                                
                            2 执行
                                a++; a = a+1 => a = 10+1 =>a=11
                    
                    fn()(); 
                        fn();  1 找 var 定义函数 参数
                                    a = und -> a =10
                                    b =function b(){
                                        a ++;
                                        alert( a );
                                    }()
                                2 执行
                                    a =10; 
                                    alert( a );  ->10
                        fn()()      a ++; a= a+1 => a=10+1 => a=11
                                    alert( a );  -> 11
                        
                        c();   ->  c = function b(){
                                        a ++;
                                        alert( a );
                                    }()    

                                    a ++  => a = a+1 => a = 11+1 = 12
                                    alert( a );  -> 12
            */
        </script>

挑战一下

<script type="text/javascript">
            
            
            var a = 5;
            function fn(){
                var a =10;
                alert( a );
                function b(){
                    a ++;
                    alert( a );
                }
                return b;
            }

            var c = fn();
            c();
            fn()();
            c();
            
            console.log( a )
            
            /*
                1 找 var 定义函数 参数
                    a = und; -> a = 5
                    fn = function fn(){
                        var a =10;
                        alert( a );
                        function b(){
                            a ++;
                            alert( a );
                        }
                        return b;
                    }
                    c = und;
                    c = function b(){
                            a ++;
                            alert( a );
                        }

                2 执行
                    a = 5; 
                    c = fn();  -> 新作用域
                                1 找 var 定义函数 参数
                                    a = und; -> a = 10
                                    b = function b(){
                                        a ++;
                                        alert( a );
                                    }
                                2 执行
                                    a =10;
                                    alert( a ); ==> 10
                                        
                    c();  ==> c = function b(){
                                a ++;
                                alert( a );
                            }()
                            1 找 var 定义函数 参数

                            2 执行
                                a++ ; a= a+1;  a = 10+1 ==> a=11
                                alert( a );  => 11

                    fn()();  ==>
                                fn();  
                                    a = und => a =10
                                    b= function b(){
                                        a ++;
                                        alert( a );
                                    }
                                    2 执行 
                                        a =10
                                        alert( a );  ->10
                                fn()();  ==> b= function b(){
                                                a ++;
                                                alert( a );
                                            }()

                                            2 执行 
                                                a ++;  a=a+1 => a= 10+1 =>> a =11
                    c();   =>  c = function b(){
                                    a ++;
                                    alert( a );
                                }()
                                
                                2 执行 
                                    a ++;  a= a+1 ==> a= 11+1 ===> a=12
                                    alert( a );  => 12
                
                
                    console.log( a )  全局里的a
            */
        </script>