JS之预解析

javascript 的预解析：（个人理解）就是js代码在执行之前 会在相应的执行环境中 预先把 一些东西解析到内存。如果理解错误，请多多指正

一. 那究竟预先解析哪些东西那？？答：预先解析 function 和 var

二. 还有就是预解析的顺序是怎们样的？

1首先是找到<script></script>标签按照<script>块依次解析（最后会有说明）

2 解析执行环境（这个有点难理解，在下面有具体解释）

3 对标识符（ var function）进行解析

接下来结合我的测试代码一一解释：

<script>
        test(); // This is test
        function test()
        {
            alert('This is test');
        }
</script>

以上案例，在function test()之前就调用了test()函数照样可以弹出 This is test

可见在js执行之前就预先把function test解析到了内存，所以调用test() 照常弹出结果；

接下来看看变量的预解析:

<script>
        alert(test);//undefined
        var test="this is test";
        alert(test);//this is test
</script>

在var test=“test”，之前就调用alert弹出test，而没有 报test未定义的错误，而是弹出了undefined，可见在js执行之前就预先把var test；解析到内存，所以不会报错，为什么会弹出undefined是因为，只是把var test的定义预先解析到内存，并没有给变量赋值；

var test="this is test";

当我们执行完这句话的时候，就完成了赋值，所以再次调用alert就弹出this is test

 

接下来继续看：变量和函数重名的时候会是什么情况？

<script>
        alert(test); //function(){ return  " this is function"} 
        var test="this is test";
        function test(){ 
            return "this is function"; 
        }
        alert(test); // this is test
        alert(test()); // this is function
</script>

这段代码证明了，当函数名和变量名一样的时候，alert(test);调用的是函数function test() 的指针，而不是调用的变量var test; 所以function的预解析 优先级 高于var（个人觉得）

 

接下来说说“  解析执行环境 ”是什么意思？？看下面的例子

 

<script>
        function test(){
            var msg ='This is test';
        }
        alert(msg); // 报错msg未定义
</script>

 

可能有人会有疑问了，按照上面说的js不是会预解析function 和 var msg吗，我在function 里面定义了var msg ，那为什么调用回报错那？？？

答案就和我们上面提到的 “解析执行环境” 有关系，在js执行之前是会预解析function 和var 没错，但是在本例中 他们“解析执行环境”不同.

Function test是在一个全局的环境中，而msg是function  test中定义的一个局部变量，msg的“解析执行环境”是在function test这个函数里面(这里可以理解为function test里的局部环境)，所以当我们在全局这个环境中alert(msg),的时候，并没有定义msg这个变量或者函数，所以就报错了；

为了进一步理解，把上面的例子加以修改

 

<script>
        alert(msg); // undefined
        function test()
        {
            alert(msg2);//undefined
            var msg2 ='This is test';
        }
         var msg = "123";
       test(); 
 </script>

这个例子，js在执行之前预解析，解析全局的环境，解析到function test 和 var msg ；所以alert(msg);会弹出undefined；

 然后当程序执行到test(); 的时候会进入function test里面去，也就是进入function test 的局部环境去 预解析，这时候解析到 var msg2，所以也弹出了undefined；

为了理解的更清楚，可以用IE的F12打个断点看一下

 

程序开始预解析的时候，实在Global这个全局的执行环境中，解析到了function test 和msg

 

当我们执行test()的时候，就会进入function test里面这个局部执行环境去解析了

 

上图可以看到黄色的箭头 有原来的Global 执行环境，变成了test则个局部执行环境了，然后再function test这个局部执行环境中预解析，此时就解析到了 var msg2 这个变量

 

 

到这应该可以理解“解析执行环境”这句话了吧，如果还不明白自己动手搞了例子，打个断点debug一下下面这段代码，应该就清楚了！

<script>
        var a = "我是全局的a";
        var b = " 我是全部的b";
        function fun1(){
            var a = "我是局部的a";
            alert(a);
            function fun2(){
                alert(a);
                alert(b);
            }
            func2();
        }
        fun1();
</script>

最后说明一下“1首先是找到<script></script>标签按照<script>块依次解析” 这句话是什么意思那？

我们的代码中可能会有多个<script>...</script>标签，每一个<script>...</script>标签我们认为是一个<script>块；js的预解析式按照<script>块来进行的；也就是说js预解析不会跨<script>块去进行预解析，什么意思那？看下面代码

 

<script>
        alert(msg);
        //test();
</script>
<script>
        var msg ="test";
        /* function test(){
         alert("this is function");
         }*/
</script>

这里有两个script块，他们是按照顺序进行预解析的，我们在第二个script块中定义的var msg，而在第一个script块中alert(msg)

显然在第一个script快中并没有预解析到一个叫msg的变量或者函数，而js又不会跨到第二个script块去解析，所以就报错msg未定义

函数function test 也一样

 

 

如果把两个script块调换一下位置，结果就不一样了

<script>
        var msg ="test";
        function test(){
            alert("this is function");
        }
</script>
<script>
      alert(msg);  // test
      test(); // this is function
</script>

script块顺序进行预解析，当第一个script块预解析完，会解析到var msg 和function test，

当再第二个script块中调用alert(msg);和test();时上面的js程序已经执行完毕了，自然会弹出 test 和this is function