JavaScript的变量：变量提升

作者：大漠 日期：2016-06-30 点击：1482
JavaScript
JavaScript学习笔记
变量

在《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声明变量（有关于更详细的介绍可以阅读《JavaScript变量：变量声明》一文）

有关于JavaScript作用域更多的介绍可以阅读下面这些文章：

可能你跟我一样，对变量作用域并没有理解透彻，但我们不能因为这个原因而不继续。

JavaScript变量提升

在JavaScript中，变量的声明可以放在它的使用之后。换句话说，变量可以先使用后声明。这主要是因为JavaScript的提升(hoisting)机制在作怪。简单点说，提升(hoisting)是JavaScript中默认就具有的一种机制，它将当用作用域内的所有声明都提升到最顶部。如此一来，可以把变量提升归纳为：

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

为了理解上面的含义，我们来看一个简单的示例。下面的代码中定义了一个函数foo():

function foo () {
    var name = "w3cplus";
    var address = "http://www.w3cplus.com";
    var age = 6;
}

其实它会摇身一变成这样：

function foo () {
    var name,address,age;
    name = "w3cplus";
    address = "http://www.w3cplus.com";
    age = 6;
}

JavaScript的提升将会影响一个变量的生命周期，JavaScript中的一个变量，其生命周期主要包含三个阶段：

  • 声明变量：创建一个新变量，如var name;
  • 变量初始化：给变量初始化一个值，如name = "W3cplus";
  • 变量使用： 使用变量的值，如console.log(name);

知道这个概念之后，再回过头来看文章开头的示例代码：

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

在编写代码时应该这样来作处理：

var name; // 代码编译阶段
name = "W3cplus"; // 代码运行阶段
console.log(name); // 代码运行阶段

所以这段代码最终输出的结果将会是W3cplus。

第二个示例代码：

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

我们应该这样来处理：

var name; // 代码编译阶段
console.log(name); // 代码运行阶段
name = "W3cplus": // 代码运行阶段

所以代码最终结果是undefined。

理解变量提升

变量提升就是把变量提升到函数的顶部。需要特别说明的是：变量提升只是提升变量的声明，并不会把赋值也提升上来。

其实前面的示例已经说明了这一切，咱们重新来看看这个foo()函数：

function foo () {
    var name = "w3cplus";
    var address = "http://www.w3cplus.com";
    var age = 6;
}

实际上foo()函数是这样子：

function foo () {
    var name,address,age;
    name = "w3cplus";
    address = "http://www.w3cplus.com";
    age = 6;
}

这个时候就把变量提升了。

上面的示例比较简单，咱们再来一个稍微复杂一点的示例：

var foo = 1;
function bar () {
    if (!foo) {
        var foo = 10;
    }
    console.log(foo);
}
bar();
var foo = 1;

答案是10。你一定觉得非常奇怪，foo等于1,if条件!foo应该是false，也就是说if代码块的代码是不会被执行。返回的值应该是undefined呀，怎么就变成10了呢？实际上，正如前面所说，变量foo被提升到了bar()函数最顶部，那么程序就变成这样：

function bar () {
    console.log(foo); // => undefined
    if (!foo) {
        var foo = 10;
        console.log(foo); // => 10
    }
    console.log(foo); // => 10
}
bar();

bar()函数运行后，输出的值是undefined 10 10,如下图所示：

变量提升

说明当在函数内使用var声明变量的时候，这个变量的声明被提升到了bar()函数的最顶部（最开始处），所以这个例子等同于：

var foo = 1;
function bar () {
    var foo; // 定义局部变量foo
    if (!foo) { // foo是undefined (false),那么!foo就是true，所以会执行if语句块
        foo = 10;
    }
    console.log(foo);
}

bar(); // => 输出的结果是10

这样一来就明白了，结果为啥会是10了吧。

接着往下看，如果把bar()函数内的var foo = 10;换成foo = 10，其结果又将是如何呢？

function bar(){
    if(!foo){
        foo=10;
    }
    console.log(foo);
}
bar();
var foo=1;

其实上面的代码变成:

var foo=1;
function bar(){
    if(!foo){
        foo=10;
    }
    console.log(foo);
}
bar(); // => 1

因为bar()中的变量foo没有使用var声明，变量不再提升。所以(!foo)会到函数外寻找定义的合局变量foo，结果是1，那!foo返回的值是false，也就不会执行if语句块内的代码。最终得到的结果是1。如果这个时候没有定义全局变量foo，就会报错。

function bar(){
    if(!foo){
        foo=10;
    }
    console.log(foo);
}
bar(); // => Uncaught ReferenceError: foo is not defined(…)

如下图所示：

变量提升

也就是说，只有在有var声明的变量才会被提升到函数最顶部。

函数声明提升

函数在声明时也会像变量一样被提升。不同的是，函数表达式不会被提升。

函数声明

函数声明提升

foo();
function foo() {
    console.log(n);
    var n = 2;
}

实际上上面的代码将会按下面的形式执行：

function foo () {
    var n;
    console.log(n);
    n = 2;
}
foo(); // => undefined

函数foo()的作用域内的变量n提升到了作用域顶部，全局作用域里的foo()函数声明民会被提前到所处的作用域顶部，即全局作用域的顶部。但是函数表达式的话只有变量被声明，但是赋值给变量的函数不会被提升。

函数表达式

函数表达式不会被提长：

foo();
var foo = function bar () {
    console.log(foo);
}

函数表达式的提升类似于变量的提升：

var foo;
foo(); // => Uncaught TypeError: foo is not a function(…)
foo = function bar () {
    console.log(foo);
}

这样会引发TypeError异常，因为当时的foo并没有赋值，对undefined进行函数调用会导致非法操作抛出异常。

函数优先

函数会首先被提升，然后跟着才是变量。也就是说同时存在函数声明与函数表达式时，函数声明会优先于函数表达式提升。

foo();

function foo() {
  console.log('1');
}

var foo = function () {
  console.log('2');
}

上面的代码将会被理解成下面的形式：

function foo() {
  console.log('1');
}

var foo;

foo(); // 1

foo = function () {
    console.log('2');
}

所以实际上的输出是 1，因为函数表达式的赋值操作会在原来的位置，而声明操作则是提升到作用域顶部，但是优先级低于函数声明。

重复声明同名变量在 JavaScript 非严格模式中将会被忽略，所以实际上函数表达式的位置并没有改变。

通过上面的介绍之后，简单的总结一下：

  • 使用var声明的变量（包括函数）其声明会被提升到方法体最顶部，而赋值不会被提升；
  • 未使用var声明的变量，不会被提升；
  • 使用函数表达式function bar(){}定义的函数会函数声明连带函数体提升到方法体最顶部；
  • 注意JavaScript中的作用域问题，JavaScript中没有块作用域(在ES6中改变了这一格局，使用let和const声明的变量，作用于块用域)

事实上，变量提升在不同方面的影响也不同：

  • 变量声明: 使用var, let或const关键字
  • 函数声明: 使用function () {...}语法
  • 类声明: 使用class关键字

有关于这方面的详细介绍，可以阅读这篇文章《详解JavaScript变量提升》。

总结

看到这里，是不是有点晕了，说真的，我自己都晕了。不过理解清楚下面这段话，你理解JavaScript中的变量提升会有很大的帮助：

如果变量在函数体内声明，它的作用域是函数作用域。否则，它就是全局作用域。变量将会在执行进入作用域时被创建。块不会定义新的作用域，只有函数声明和程序才可以。变量在创建的时候会被初始化为undefined。如果变量声明语句带有赋值操作，则赋值操作只有在被执行的时候才会发生，而不是创建的时候。

如果文章中有不对之处，或者你有更好的意见欢迎在下面的评论中与我们分享。

参考资料

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/javascript/javascript-hoisting-in-details.html

返回顶部