<script> console.log(a); var a = "a"; function foo() { console.log(a); var a = 'a1'; } foo(); </script>
由于js自上而下逐行解释执行的，有人可能会认为第一行代码引用了一个没有声明的变量a，会抛出 ReferenceError 异常，而注掉第一行后，由于变量 a 在第二行log之前已经声明并赋值，打印结果应该是 "a"。而实际的执行结果是：
在js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。举例来说：
<script> console.log(a); var a = 3; //预编译后的代码结构可以看做如下 var a; // 将变量a的声明提升至最顶端，赋值逻辑不提升。 console.log(a); // undefined a = 3; // 代码执行到原位置即执行原赋值逻辑 </script>
变量提升
变量声明的提升是以变量所处的第一层词法作用域为“单位”的，即全局作用域中声明的变量会提升至全局最顶层，函数内声明的变量只会提升至该函数作用域最顶层。那么开始的一段代码经过预编译则变为：
<script> var a; console.log(a); //undefined a = "a"; function foo() { var a; //全局变量会被局部作用域中的同名变量覆盖 console.log(a); //undefined a = 'a1'; } foo(); </script>
函数提升
有了上面变量提升的说明，函数提升理解起来就比较容易了，但较之变量提升，函数的提升还是有区别的。举例说明：
<script> console.log(foo1); foo1(); console.log(foo2); foo2(); function foo1 () { console.log("foo1"); }; var foo2 = function () { console.log("foo2"); }; </script>
即函数提升只会提升函数声明，而不会提升函数表达式，再举一个小例子：
<script> var a = 1; function foo() { a = 10; console.log(a); return; function a() {}; } foo(); console.log(a); </script>
上面的代码块经过预编译后可以看做如下形式（只分析foo方法内部情况）：
<script> var a = 1; // 定义一个全局变量 a function foo() { // 首先提升函数声明function a () {}到函数作用域顶端， 然后function a () {}等同于 var a = function() {};最终形式如下 var a = function () {}; // 定义局部变量 a 并赋值。 a = 10; // 修改局部变量 a 的值，并不会影响全局变量 a console.log(a); // 打印局部变量 a 的值：10 return; } foo(); console.log(a); // 打印全局变量 a 的值：1 </script>
变量提升和函数提升的顺序
在作用域中，不管是变量还是函数，都会提升到作用域最开始的位置。不同的是，函数的提升后的位置是在变量提升后的位置之后的。
<script> function foo() { console.log(a); var a = 1; console.log(a); function a() { } console.log(a); } foo(); </script>
上面的代码在js眼中是这样解析的：
<script> function foo() { var a; function a() { } console.log(a); a = 1; console.log(a); console.log(a); } foo(); </script>
注意：只有声明的变量和函数才会进行提升，隐式全局变量不会提升。例：
<script> function foo() { console.log(a); console.log(b); // 报错 b = 'aaa'; var a = 'bbb'; console.log(a); console.log(b); } foo(); </script>
参考链接：