JavaScript 是一门脚本语言，其可以不经过编译而直接运行（这点与 Java 不同，Java 需要编译之后才能运行），但是 JavaScript 存在一个预编译的问题。

预编译

---

1. JavaScript 脚本的运行由两个阶段组成：预编译阶段 和 执行阶段，先进行预编译，再执行语句；
2. 预编译，简单理解，就是在内存中开辟一块空间，用来存放变量和函数。在 JavaScript 中，JavaScript 会在内存中为使用 <code>var</code> 关键字声明的变量和使用 <code>function</code> 关键字声明的函数开辟一块空间，用来存放使用这两者声明的变量和函数；
3. 在预编译时，<code>function</code> 的优先级比 <code>var</code> 高，如：

function a(){};
var a = 1;

此时 <code>a</code> 的类型是 <code>function</code>，而不是 <code>number</code>；

4. 注意：预编译时并不会对变量进行赋值（即不会进行初始化），变量赋值是在 JavaScript 脚本执行阶段进行的。

下面我们通过一些例子来理解预编译。

实例1

---

代码：

<script>
    console.log('before: ' + a); // ①
    var a = 1;                   // ②
    console.log('after: ' + a);  // ③
</script>

效果演示：

实例1.png

结果分析：

1. JavaScript 脚本在执行之前先进行预编译，所以 ① 和 ③ 不会执行，而是先执行 ②，进行预编译；
2. 因为预编译阶段是不对变量进行赋值的，即不进行初始化，所以 ② 也只执行前半部分 <code>var a;</code>，由于只声明了 <code>a</code> 而没有进行赋值，所以此时 <code>a</code> 的值为 <code>undefined</code>；
3. 预编译完毕之后，JavaScript 脚本开始执行，执行顺序按照从上到下的顺序执行。
   所以，上面的代码可以拆分成下面的样子：

<script>
    console.log('before: ' + a); // ①
    var a;                       // ②
    a = 1;                       // ③
    console.log('after: ' + a);  // ④
</script>

首先进行预编译，先执行 ②，之后预编译结束，按照从上到下的顺序依次执行 ① -> ③ -> ④，执行 ① 的时候，由于此时 <code>a</code> 并未进行赋值，其默认的值为 <code>undefined</code>，所以输出 <code>before: undefined</code>，之后执行 ③，对 <code>a</code> 进行赋值，此时 <code>a = 1</code>，最后执行 ④，输出 <code>after: 1</code>。

实例2

---

代码：

<script>
    a();                        // ①
    console.log(a);             // ②
    function a(){               // ③
        console.log('function');// ④
    }                           // ⑤
    console.log(a);             // ⑥
    a();                        // ⑦
</script>

效果演示：

实例2.png

结果分析：
上面的代码中我们声明了一个函数 <code>a()</code>，按照前面说的，在 JavaScript 脚本执行之前会先进行预编译，所以函数 <code>a()</code> 会被预编译，之后再执行 JavaScript 语句，① 为执行函数 <code>a()</code>，② 为在控制台输出函数 <code>a()</code>。

实例3

---

代码：

<script>
    a();                    // ①
    function a(){           // ②
        console.log('a');   // ③
    }                       // ④
    var a = 1;              // ⑤
    a();                    // ⑥
</script>

效果演示：

实例3.png

结果分析：

1. 预编译阶段：②③④ 和 ⑤ 的前半部分 <code>var a;</code> 执行，由于 <code>function</code> 优先级比 <code>var</code> 高，所以预编译结束之后 <code>a</code> 的类型为 <code>function</code>；
2. 执行阶段：按顺序从上往下执行，首先执行 ①，此时 <code>a</code> 的类型为 <code>function</code>，执行没问题；然后把 <code>1</code> 赋值给 <code>a</code>，由于 JavaScript 是弱类型语言，此时 <code>a</code> 的类型为 <code>number</code>，之后再执行函数 <code>a()</code>，会出现错误：Uncaught TypeError: a is not a function，因为 <code>a</code> 此时本质上是一个变量，而不是函数。

实例4

---

代码：

<script>
    b();                    // ①
    var b = function () {   // ②
        console.log('b');   // ③
    };                      // ④
    b();                    // ⑤
</script>

效果演示：

实例4.png

结果分析：

1. 预编译阶段：执行 ② 的前半部分 <code>var b;</code>，此时 <code>b</code> 为变量，其值为 <code>undefined</code>（注意：此阶段并不会将匿名函数赋值给 <code>b</code>，赋值在执行阶段才进行）；
2. 执行阶段：首先执行 ①，由于 <code>b</code> 的类型为变量，而不是 <code>function</code>，所以会报错：预编译.html:9 Uncaught TypeError: b is not a function，此时程序出错，不再往下执行；
3. 将 ① 屏蔽，再次运行脚本，预编译阶段还是一样，执行阶段：将一个匿名函数赋值给变量 <code>b</code>，此时 <code>b</code> 的类型为 <code>function</code>，再执行 <code>b()</code>，控制台正常输出 <code>b</code>。

实例5

---

代码：

<script>
    function c() {          // ①
        console.log('c1');  // ②
    }                       // ③
    c();                    // ④
    function c() {          // ⑤
        console.log('c2');  // ⑥
    }                       // ⑦
</script>

效果演示：

实例5.png

结果分析：

1. 预编译阶段：先执行 ①②③ 和 ⑤⑥⑦，由于 ⑤⑥⑦ 声明的函数与 ①②③ 声明的函数同名，所以后声明的函数会覆盖掉之前声明的函数；
2. 执行阶段：执行 ④，由于前面所说，所以在控制台会输出 <code>c2</code>。

总结

---

总之，要理解预编译，只要弄清两点：变量/函数声明 与 变量赋值。在预编译阶段，只进行 变量/函数声明，不会进行变量的初始化（即变量赋值，所有变量的值都是 <code>undefined</code>）；变量赋值 是在执行阶段才进行的。