JavaScript函数声明前置与变量声明

先看一个例子

func1();    // 输出：我是函数声明

func2();    // 报错 

console.log(a); // 输出：undefined

function func1() {
    console.log("我是函数声明");
}

var func2 = function() {
    console.log("我是函数表达式");
}

var a = 10;

因为JS会对函数声明前置，所以func1在函数声明前面执行依旧得到正确答案，而函数表达式func2则报错，为什么？我们先要弄清楚：

JS解释器如何找到我们定义的函数和变量？
通过 变量对象（Variable Object, VO)来获取。VO是一个抽象概念的“对象”，它用于存储执行上下文中的：1. 变量；2. 声明；3. 函数参数。

函数的VO分为两个阶段——变量初始化和代码执行。在变量初始化阶段，VO按照如下顺序填充：
1. 函数参数（若未传入，初始化该参数值为undefined）
2. 函数声明（若发生命名冲突，会覆盖）
3. 变量声明（初始化变量值为undefined，若发生命名冲突，则忽略）

注意：函数表达式与变量初始化无关。

在变量初始化阶段，需要先对arguments变量进行初始化（激活对象，AO），再把函数体内的变量声明与函数声明存储在AO内，VO(functionContext) === AO。

根据VO数据填充顺序看以下例子

function test(a, b) {
    var c = 10;
    function d() {}
    var e = function _e() {}
    (function x() {});
    b = 20;
}
test(10);

// 变量初始化阶段AO
AO(test) = {
    a:10,
    b:undefined,
    c:undefined,
    d:<ref to func "d">,
    e:undefined
};

// 代码执行阶段AO
AO(test) = {
    a:10,
    b:20,
    c:10,
    d:<ref to func "d">,
    e:function _e() {}
};

上述代码说明在变量初始化阶段，函数声明已经被填充至VO中，也就是进行了前置，而函数表达式不影响VO。同时，我们也看到变量在初始化与代码执行阶段的变化，下面测试另一个例子。

alert(x);   // function x() {} 注：函数声明前置

var x = 10; // 该声明被忽略
alert(x);   // 10 注：在代码执行阶段将VO中的x对应值修改为10
x = 20;

function x() {}
alert(x);   // 20 注：在代码执行阶段将VO中的x对应值修改为20

if (true) {
    var a = 1;
} else {
    var b = true;
}

alert(a);   // 1
alert(b);   // undefined 注：赋值没被执行，在初始化阶段VO中b的值为undefined