javascript(js)预解析原理浅谈

如果JavaScript仅是运行时自上往下逐句解析的，下面的代码能正确运行是可以理解的，因为我们先定义函数，然后才调用它。

<script type="text/javascript">

      function showmsg(){

           alert("This is message ");

      }

      showmsg();

</script>

结果是This is message，这个没问题

先不说什么是预解析，我们看一个例子：

<script type="text/javascript">

      alert(num);

      var num=1;

</script>

这个函数执行时会弹出什么呢？思考一下，结果是?undefined；因为在解释到 var num= 1; 这句之前就打印了num的值，此时尚未给num赋值。为什么不输出“未定义”呢，通俗点说就是因为在一个javascript块加载未执行时，程序会先看一遍有什么东东，并把它放在一个地方！

下面就说函数预解析：

1、javascript在执行前会进行类似“预解析”的操作：首先会创建一个在当前执行环境下的活动对象，并将那些用var 声明的变量、定义的函数设置为活动对象的属性，但是此时这些变量的赋值都是undefined。

2、在javascript解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到?而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = …这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）。

例：

?<script type="text/javascript">

      handle();

var handle=function (){

alert("输出");

}

</script>

结果：handle is not a function.因为在执行handle（）这句时并没有给handle赋值-也就是函数未定义

在看一个例子：

?

?<script type="text/javascript">

      handle();

       function handle(){

              alert(num);

              var num=10;

       }

</script>

输出结果是：undefined；原理同上！

是不是有点简单，在给你下点猛料：

?

?<script type="text/javascript">

        function handle(){

            var num=10;

       }

alert(num);

</script>

结果：undefined，有人说num是局部变量，在外部不能够直接调用，不错，从另一个方面来说，javascript预解析是把变量或函数预解析到他们能调用的环境（变量运行时环境）中，这表明javascript预解析并不是把所有定义的变量同一解析到一个全局对象中，比如说window。

为了让大家加深js预解析的印象，在举一个例子：

?   <script type="text/javascript">
showMsg(); // 这是函数2

function showMsg()
{
   alert("这是函数1");
}
showMsg();//这是函数2
function showMsg()
{
   alert("这是函数2");
}
   </script>

结果输出两次“这是函数2”，原因是后面的showMsg()覆盖了前面定义的（js中，同名变量一样会存在覆盖问题），等于第一个showMsg()直接被覆盖掉，报废了，为什么第二次调用的showMsg不是调用它上面定义的那么showMsg（）函数呢？这再次证明了javascript存在预解析行为！

最后在来一个存在于连个javascript块的同名变量：

?

?   <script type="text/javascript">
showMsg(); // 这是函数2

function showMsg()
{
   alert("这是函数1");
}
   function showMsg()
{
   alert("这是函数2");
}
   </script>

??   <script type="text/javascript">
   function showMsg()
{
   alert("这是函数3");
}
   </script>

程序输出结果是：这是函数2

说明第二个javascript块的变量在预解析时不会覆盖另一个javascript块的同名变量！而在同一个javascript块的同名变量会被覆盖！！