js预解析

首先来一个简单的代码：

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

那么结果是什么呢？
我本来以为是undefined、10、function a() { var b = 1; }、function() { var b = 2; }
但是结果却是这样的：

为什么会这样呢，是因为 js 在正常解析前先进行预解析，那么如何预解析呢？

var 预解析
js 在正常解析之前，会快速的把 script (或者 funciton )中的 var 声明及声明的名字，提升到代码块(作用域)的最前面。
function 预解析
js 在正常解析之前，会快速的把 script (或者 funciton )中的 function 及内容提升到代码块(作用域)的最前面，跟在 var 声明之后。

在预解析时，会产生一个仓库，存储声明的变量和函数，如果变量或函数有同名的情况，则覆盖前面的，只留一个。在解析代码时，在这个仓库里找同名的变量或是函数

下面是我对上面例子的预解析过程的理解：
第一步对 var、function 提升：

    var a;
    var a;
    function a() {
        var b = 1;
    }
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function() {
        var b = 2;
    };
    console.log(a);

第二步同名覆盖：

    function a() {
        var b = 1;
    }
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function() {
        var b = 2;
    };
    console.log(a);

预解析后， js 会从上到下一行一行执行，遇到表达式时，如果表达式对变量进行修改，则修改预解析的值。就像上面的yu

总结：感觉自己要巩固基础

js预解析

推荐阅读更多精彩内容