JavaScript基础 解析顺序

javascript的解析顺序

1、先找出所有的定义
      var 变量名 ：仅仅找出变量名字，不会进行赋值 ===>这叫 提升变量声明
      function 函数名（） {} 找出函数块
2、执行步骤 除了定义其他的都是执行步骤 = 赋值 运算 函数执行 等等

var的时候

例：

alert( a ); ==>弹出undefined
var a = 10;//var a先被提取出来  a = 10;这是执行步骤
alert( a ); ===>弹出10

js先看所有的定义var a ;先提取变量 var a 全局就有 a 了 再来执行 alert( a ); ==>弹出undefined
注意：
      var 是定义步骤
      =是执行步骤

上面的代码可以看成：

var a ;
alert( a );  ==>弹出undefined
a = 10;  //执行步骤
alert( a );  ===>弹出10

函数的时候

fn()
function fn(){
    alert( 1 );
}

先找出函数块 function fn(){alert( 1 );} 然后再 执行 fn();放在什么地方都可以

alert( x )//弹出undefined
x();//报错
//这里是提取var x ==>undefined 再拿undefined来执行；
//再执行 x ();加括号就是执行函数 x不是函数会报错；
var x = function (){
    alert( 2 );
}
x(); ==>这里就可以执行；x 就是等于function (){alert( 2 );} 弹出2

完整的解析顺序

<script type="text/javascript">
    var a = 10;
    x();
    function x(){
        var b = 20;
        alert( b );
    }
    alert( a );
    /*
    执行顺序：
    执行全局作用域：
        1、定义
            var a ;
            function x(){
                var b= 20;
                alert( b );
            }
        2、执行步骤
            a = 10;
            x(); ====>新的作用域触发====>依照上面的规则：1、定义
                                                            var b;
                                                         2、执行步骤
                                                            b = 20;
                                                            alert( b ); 弹出 20；
           回来父级这层开始向下执行
           alert( a ); 弹出10；
     */
</script>

同局作用域 变量与函数重名

函数的优先级比较高

    var a;
    function a(){
        alert(1);
    }
    a();
先执行定义步骤 var a    function a(){alert(1);}
var a会被函数覆盖===>保留function a(){alert(1);}
再来执行步骤
a()  ==>弹出1；



    var a = 10;
    function a(){
        alert(1);
    }
    a();

先执行定义步骤 var a    function a(){alert(1);}
var a会被函数覆盖===>保留function a(){alert(1);}
再来执行执行步骤
a = 10
a()  ==>报错  现在a是10；

练习题

一、
    var a = 10;
    x();
    function x(){
        alert( a );
        var a = 20;
    }
    alert( a );
    /*
    先看全局
    1、定义
        var a 
        function x(){}
    2、执行
        a = 10;
        x()  ===产生新的作用域===>1、定义
                                     var a
                                  2、执行
                                     alert( a ) ===>弹出undefined
                                     a = 20;
       回到父级执行
       alert( a )===>弹出 10
     */

二、
<script type="text/javascript">
    function a(){
        alert(1);
    }
    var a;
    alert( a );
    /*
    先看全局
    1、定义
        var a
        function a(){ }
    2、执行
     alert( a ); ==>弹出function a(){alert(1);}
     函数没有执行
     */
</script>


三、
<script type="text/javascript">
    function a(){
        alert(1);
    }
    var a;
    alert( a );
    /*
    先看全局
    1、定义
        var a
        function a(){ }
    2、执行
     alert( a ); ==>弹出function a(){alert(1);}
     函数没有执行
     */
</script>

四、

<script type="text/javascript">
    console.log( a );
    var a = 10;
    console.log( a );
    function a(){console.log( 20 )};
    console.log( a );
    var a = 30;
    console.log( a );
    function a(){console.log( 40 )};
    console.log( a );
</script>
打印出  function a(){console.log( 40 )};  10  10  30   30
/*
    全局
    1、定义
        var a
        function a(){console.log( 20 )};
        var a
        function a(){console.log( 40 )};
        最后保留 function a(){console.log( 40 )};

     2、执行
        console.log( a ); 弹出 function a(){console.log( 40 )};
        a = 10;
        console.log( a ); 弹出 10；
        function a(){console.log( 20 )}; 这是定义的步骤
        console.log( a ); 弹出 10；
        a = 30;
        console.log( a ); 弹出 30；
        function a(){console.log( 40 )}; 这是定义的步骤
        a = 30;
        console.log( a ); 弹出 30；
     */

五、
<script type="text/javascript">
    var a = 10;
    alert( a );
    a();
    function a(){
        alert(20);
    }
    /*
    1、定义
         var a 
         function a(){ }
     2、执行
        a = 10;
        alert( a );==>10;
        a(); ===>报错
     */
</script>

六、
<script type="text/javascript">
    a();
    var a = function (){alert(1)};
    a();
    var a = function (){alert(2)};
    a();
    var a = function (){alert(3)};
    /*
    1、定义
        var a
    2、执行
        a()                           ===>报错  下面就不执行了
     */

</script>

补充的注意事项

alert( a )
if( false ){
    var a = 10;
}
全局作用域
1、编译：（ 不会看执行部分  在同个作用域下无论 if  for ...都会先把声明的找出来，不受任何影响 ）
  所以可以找到  var a
2、执行
    alert( a ) ===>undefined 
    if( false ){ }   再执行这个

传参数的时候

var a = 5;
function fn( a ){
    // 隐藏一个步骤  把实参传给 形参 a = 5  的步骤
    alert( a );  ===>弹出5
    var a = 10;
    alert( a );
}
fn( a )