在《JavaScript变量：变量声明》一文中了解了，在JavaScript中可以通过关键词var、let和const来声明一个变量。并且提到过，使用let和const声明的变量不存在变量提升；而使用var声明的变量存在变量提升。那么什么是变量提升，这篇文章主要来介绍的就是这方面的知识。

JavaScript代码的运行规则

在JavaScript代码运行之前其实是有一个编译阶段的。编译之后才是从上到下，一行一行解释执行。这样一来也给初学者造成很大的误解。初学者会觉得JavaScript的代码是从上到下，一行一行的解释执行的。按这样的思路，在有些情况下就会造成惨案：

name = "W3cplus";
var name;
console.log(name);

按照代码从上到下一行一行解释执行的说法，有些同学可能会觉得console.log(name)输出的值是undefined。那是因为name = "W3cplus"在var name之前，变量name被重新定义了，而且没有给其赋值，所以认为此时name的值是undefined。输出的也应该是undefined。但事实上输出的值是"W3cplus"。下图是Chrome浏览器调试器下的输出结果：

再来看一段代码：

console.log(name);
var name = "W3cplus";

当初我就以为它输出的结果是Uncaught ReferenceError: name is not defined(…)。因为变量name在没有声明的情况下就被使用了。而事实上呢，并如如此，它输出的结果是undefined。如下图所示：

为什么会这样呢？因为JavaScript代码运行时，它把变量和函数的声明提升至作用域的顶端。而这个阶段就发生了变量提升。同时JavaScript在编译阶段的工作之一就是将变量与其作用域进行关联。那么要彻底的理解JavaScript声明提升，需要对JavaScript的变量作用域有一定的了解。

JavaScript变量作用域

对于JavaScript的初学者来说，变量作用域是最令人感到困惑的一部分。有关于JavaScript中变量的作用域，本文不做介绍，因为要说清楚它，需要大幅篇幅，而且对于我这样的新手也道不清说不明。拿张图向大家简单的展示一下：

在JavaScript中，变量有4种基本方式进入作用域：

• 语言自身定义(Language-defined)：所有的作用域默认都会包含this和arguments
• 函数形参(Formal parameters)：函数有名字的形参会进入到函数体的作用域中
• 函数声明(Function decalrations)：通过function foo() {...}方式实现函数声明
• 变量声明(Variable declarations)：通过var foo;形式声明变量，当然在ES6中还增加了let和const声明变量（有关于更详细的介绍可以阅