JS预解析

JS预解析的定义：

在当前作用域下，js运行之前，会把带有var和function关键字的代码事先声明，并在内存中存好。然后再从上到下执行语句。

预解析只会发生在通过var定义的变量和function上。

1. var

通过var关键字定义的变量进行预解析的时候，都只是声明（declare），不管它有没有赋值，都会赋值undefined。

alert(a); //undefined
var a = 1;
alert(b); //undefined
var b = function(){
}
alert(c); //undefined
var c;

只要是通过var定义的，不管是变量，还是函数，都是先赋值undefined，在真正执行的时候才会为它赋值。

2. function

function进行预解析的时候，不仅是声明（declare）而且还定义（define）了，但是它存储数据的空间里存储的代码是字符串，没有任何意义。

alert(a); //弹出的是下面的function
function a(){
　　alert("预解析function")
}

我们知道，定义函数的方式有函数声明和函数表达式两种。解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明，并使其在执行任何代码之前可用（可访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

alert(sum(10,10));
function sum(num1,num2)
{
    return num1+num2;
} 

以上代码完全可以正确执行，因为在代码开始执行之前，解析器就已经通过一个名为函数声明提升（function declaration hoisting）的过程，读取并将函数声明添加到执行环境中。对代码求值时，JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，JavaScript引擎也能把函数声明提升到顶部。如果像下面的例子所示，把上面的函数声明改为等价的函数表达式，就会在执行的时候出现错误。

alert(sum(10,10));
var sum=function(num1,num2)
{
    return num1+num2;
}; 

以上代码会在运行的时候出现错误，原因在于函数位于一个初始化语句中，而不是一个函数声明。换句话讲，在执行到函数所在的语句之前，变量sum中不会保存有对函数的引用。

注： 在JS解析器进行预解析的时候会遵循一个原则，变量声明和函数声明重名的话会优先存储函数声明，与先后顺序无关。

3. 代码块

javascript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。这里有一个很重要的概念—代码块。

JavaScript中的代码块是指由

<script type="text/javascript">
    alert("这是代码块一");
</script>
<script type="text/javascript">
    alert("这是代码块二");
</script>

JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。

<script type="text/javascript">
    var test = "我是代码块一变量";
    alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
    alert("我是代码块一");//没有运行到这里
</script>
<script type="text/javascript">
    alert("我是代码块二"); //这里有运行到
    alert(test); //弹出"我是代码块一变量"
</script>

上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。

<script type="text/javascript">
    fn1();//运行结果：第二个函数
    function fn1(){
        console.log("第一个函数");
    }
    function fn1(){
        console.log("第二个函数");
    }
</script>
<script type="text/javascript">
    function fn1(){
        console.log("第三个函数");
    }
</script>

上面代码中，第一个块中的第二个函数覆盖了第一个，而第二个块中的第三个函数却没有覆盖前面的。

<script type="text/javascript">
    Fn();  //浏览器报错:"undefined"
</script>
<script type="text/javascript">
    function Fn(){
        alert("执行了函数Fn");
    }
</script>

上面代码中，在第一个块中调用第二个块中的函数，浏览器报错。

<script type="text/javascript">
    function Fn(){
        alert("执行了函数Fn");
    }
</script>
<script type="text/javascript">
    Fn();  //弹出"执行了函数Fn"
</script>

如果在第二个块中调用第一个块中的函数，浏览器就会正确运行。

因为JS引擎是顺序执行的，其实完整的说应该是按照代码块顺序进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边编译边处理的核心所在。

小结：

step 1. 读入第一个代码块。

step 2. 做语法分析，有错（比如括号不匹配等）则报错并跳转到step5。

step 3. 对var变量和function定义做“预编译处理”（永远不会报错，因为只解析正确的声明）。

step 4. 执行代码段，有错（比如变量未定义）则报错并跳过本代码块剩余代码。

step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。

step6. 结束。

提醒！！！

函数声明只能出现在程序或函数体内。从句法上讲，它们不能出现在Block（块）（{ … }）中，例如不能出现在 if、while 或 for 语句中。

function f(){
    console.log("outside f()");
}
(function (){
    if(false){
        function f(){
            console.log("inside f()");
        }
    }
    f(); // Uncaught TypeError: f is not a function
})();

此处调用f会报错，甚至连外层的f也取不到，这是为什么呢？

条件语句块中声明的函数，其效果等同于在此处声明的函数表达式。

在这里，由于变量提升，以+开头的匿名函数里面，首先声明变量f，然后到了条件语句内部才会定义其函数，而你的条件语句是永远失败的，所以这里你只会找到未初始化的变量f，而不是函数f。所以报的错也是TypeError，一个变量怎么能通过 f() 这种函数的方式调用呢。
报错代码相当于：

function() {
    if (false) {
        var f = function() { console.log("inside f()"); };
    }
}

或：

var f；
if(false){
    f = function(){
        console.log("inside f()");
    }
}

这两段代码效果是一样的，就相当于：

if(false){
    var a=1;
}
console.log(a); //undefined 而不是a is not defined，因为变量提升

总结：

var变量在真正执行的时候才会为它赋值。

函数声明在执行任何代码之前可用（可访问）。

函数表达式必须等到解析器执行到它所在的代码行，才会真正被解析执行。

Block（块）中只能包含Statement语句，而不能包含函数声明这样的源元素。也就是说严格来讲，这种写法是不规范的，所以大家还是不要这样写。非要这样用的话，就写成函数表达式吧……

var foo;
if (true) {
    foo = function() {
        return 'first';
    };
}
foo();