关于JavaScript预解析的一些理解

昨天一个师弟面试遇到一道题，对于输出的结果不太理解，问我为什么是这样，题目如下

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);

上面代码运行输出的结果是

一般看到第一行console.log(a)，一般反应过来的应该是打印一个还没有定义的变量a，所以应该是undefined才对，事实上并不是，这就关系到JavaScript的预解析问题

浏览器去运行JavaScript代码，至少要经过两个步骤，而且顺序不会变

1. 代码的预解析
2. 逐行运行代码
3. ....

逐行运行代码应该没什么问题，就是从上到下一行一行的按照顺序运行代码，这里要说的是代码的预解析

预解析步骤

1.首先找到代码中的所有变量和函数（当遇到变量的时候，会自动的把这个变量赋值为undefined），存在内存里面
2.当函数名和变量名重名之后，只保留函数在内存中
...

按照这个步骤，就很容易的解析了上面的代码，代码预解析之后，内存里面只剩下了函数a

   function a() {
        console.log(4);
    }

所以当逐行解析代码，代码运行的第一行的时候就会去内存里面找变量a,而这时候内存里面存的是一个函数名为a的函数,所以第一行代码运行的结果就是

function a() {
        console.log(4);
    }

当代码执行到第二行的时候，内存里面的a被重新赋值，所以，第三行打印的是1，下面以此类推。