JS预解析

以下为个人对JS预解析的理解，有不正确的地方，希望您能提出，欢迎访问，不喜可喷。

JS解析过程：先预解析，然后逐行的解读代码。

那么我们带着几个问题去看下面的代码，我先给出答案，在下文给出解释。

一、预先解析哪些东西？

　　--预先解析 var 和 function

二、预解析的顺序？

　　--首先是找到<script></script>标签，按照<script>块依次解析。

　　--按执行环境解析

　　--对 var 和 function 进行解析

1、先来一段小代码，简单说一下原理

<script>
    console.log(a);   //undefined
    var a = 10;
    function fn(argument) {
        console.log(a);   //  undefined
        var a = 100;
    }
    fn();
</script>

这段代码中，有两个作用域：

　　一个是全局作用域：作用域下有 a ，fn 。

　　一个是fn的内部作用域：作用域下有 argument（参数，我们将参数和函数内的局部变量同等看待），局部变量 a 。

这两个作用域就是预解析的执行环境，JS会先在全局环境中进行预解析，查找 var a 预先解析到内存，而没有给变量赋值，所以输出结果为undefined；然后把function fn解析到内存，所以调用fn() 照常弹出结果；在局部作用域中预解析也是一样的，先将var a预先解析到内存，并未赋值，所以输出结果为undefined；

2、接下来我们看一下变量和函数重名的时候会是什么情况？

<script>
    console.log(fn);   // fn()
    var fn = 10;
    function fn() {
        var a = 100;
    }
    console.log(fn);    //  10
    fn();       //  报错：fn is not a function
</script>

输出的结果：

为什么会是这样的结果？

　　是因为function预解析时会被置顶，就像是优先级高的说法；同名function预解析时会覆盖同名的var；

　　在解读JS时var fn=10；function fn会跳过，说以fn为10，所以执行fn()时报错 “fn is not a function” ；

3、我们现在举个例子说明一下按照<script>块依次解析的问题：

<script>
    alert(msg);  //报错 msg is not defined
    //test();   //报错 test is not defined
</script>
<script>
    var msg ="123456";
     function test(){
        alert("1234567");
     }
</script>

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

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

将两个代码块调换就是另一种结果：

<script>
    var msg ="123456";
     function test(){
        return "1234567"
     }
</script>
<script>
    console.log(msg);  // "123456"
    console.log(test());   //"1234567"
</script>

结果：

当第一个script块预解析完，会解析到var msg 和function test，所以当第二个script块中执行console.log(msg)和console.log(test())时;上面的js程序已经执行完毕了，自然会输出 123456 和1234567；

4、假如一个变量我们不是用var声明的呢？

<script>
    console.log(msg)
    msg ="123456";
</script>

结果：

这也是为什么我们不推荐不去使用var声明变量的原因，我们说过Js预解析是对 var 和 function 进行解析。所以这里会报错。

不知道你理解了JS预解析没有，那我们来测试一下，哈哈

<script>
    console.log(a);
    var a = 1;
    console.log(a);
    function a() {
        console.log(2)
    }
    console.log(a);
    var a = 3;
    console.log(a);
    function a() {
        console.log(4)
    }
    console.log(a);
    a();
</script>

这是不是你想要的结果呢？