JavaScript 是一门脚本语言，其可以不经过编译而直接运行（这点与 Java 不同，Java 需要编译之后才能运行），但是 JavaScript 存在一个预编译的问题。
预编译
- JavaScript 脚本的运行由两个阶段组成：预编译阶段 和 执行阶段，先进行预编译，再执行语句；
- 预编译，简单理解，就是在内存中开辟一块空间，用来存放变量和函数。在 JavaScript 中，JavaScript 会在内存中为使用 <code>var</code> 关键字声明的变量和使用 <code>function</code> 关键字声明的函数开辟一块空间，用来存放使用这两者声明的变量和函数；
- 在预编译时，<code>function</code> 的优先级比 <code>var</code> 高，如：
function a(){};
var a = 1;
此时 <code>a</code> 的类型是 <code>function</code>，而不是 <code>number</code>；
- 注意：预编译时并不会对变量进行赋值（即不会进行初始化），变量赋值是在 JavaScript 脚本执行阶段进行的。
下面我们通过一些例子来理解预编译。
实例1
代码：
<script>
console.log('before: ' + a); // ①
var a = 1; // ②
console.log('after: ' + a); // ③
</script>
效果演示：
结果分析：
- JavaScript 脚本在执行之前先进行预编译，所以 ① 和 ③ 不会执行，而是先执行 ②，进行预编译；
- 因为预编译阶段是不对变量进行赋值的，即不进行初始化，所以 ② 也只执行前半部分 <code>var a;</code>，由于只声明了 <code>a</code> 而没有进行赋值，所以此时 <code>a</code> 的值为 <code>undefined</code>；
- 预编译完毕之后，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>
效果演示：
结果分析：
上面的代码中我们声明了一个函数 <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>
效果演示：
结果分析：
- 预编译阶段：②③④ 和 ⑤ 的前半部分 <code>var a;</code> 执行，由于 <code>function</code> 优先级比 <code>var</code> 高，所以预编译结束之后 <code>a</code> 的类型为 <code>function</code>；
- 执行阶段：按顺序从上往下执行，首先执行 ①，此时 <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>
效果演示：
结果分析：
- 预编译阶段：执行 ② 的前半部分 <code>var b;</code>，此时 <code>b</code> 为变量，其值为 <code>undefined</code>（注意：此阶段并不会将匿名函数赋值给 <code>b</code>，赋值在执行阶段才进行）；
- 执行阶段：首先执行 ①，由于 <code>b</code> 的类型为变量，而不是 <code>function</code>，所以会报错：预编译.html:9 Uncaught TypeError: b is not a function，此时程序出错，不再往下执行；
- 将 ① 屏蔽，再次运行脚本，预编译阶段还是一样，执行阶段：将一个匿名函数赋值给变量 <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>
效果演示：
结果分析：
- 预编译阶段：先执行 ①②③ 和 ⑤⑥⑦，由于 ⑤⑥⑦ 声明的函数与 ①②③ 声明的函数同名，所以后声明的函数会覆盖掉之前声明的函数；
- 执行阶段：执行 ④，由于前面所说，所以在控制台会输出 <code>c2</code>。
总结
总之，要理解预编译，只要弄清两点：变量/函数声明 与 变量赋值。在预编译阶段，只进行 变量/函数声明，不会进行变量的初始化（即变量赋值，所有变量的值都是 <code>undefined</code>）；变量赋值 是在执行阶段才进行的。
