《JavaScript应用程序设计》一一2.7 变量提升

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章，第2.7节，作者：Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.7 变量提升

变量提升是指函数中的所有变量声明会在函数执行时被“提升”至函数体顶端，这仅仅是从非技术角度来阐述的，至少从开发者看来实际效果如此。
JavaScript的执行环境构建分为声明阶段和执行阶段。在声明阶段JavaScript引擎为所有变量与函数声明创建标识符，可以将此阶段看作是对运行环境的前期配置。到了执行阶段，函数均已被定义，但所有变量的值均未定义，例如:

var x = 1;

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

我相信大部分人都会认为console.log(x)中x的值为1，这算是JavaScript中一个典型的代码陷阱。在声明阶段仅有函数被定义，此时在作用域内外x的值都为undefined，而在执行到console.log()语句时，内部作用域中的x虽被定义但还未被赋值，所以其值仍为undefined，实际上JavaScript是这样解释代码的：

var x = 1;

(function () {
  var x; // Declaration is hoisted and x is undefined.
  console.log(x);
  x = 2; // Initialization is still down here.
}());

函数的“提升”会与变量稍显不同，此例中，名为number的函数标识符与函数体会同时被“提升”，而相比较前面的例子，对变量x的赋值操作未被“提升”。

test('Function declaration hoisting', function () {
  function number() {
    return 1;
  }

  (function () {
    equal(number(), 2, 'Inner scope wins.');

    function number() {
      return 2;
    }
  }());

  equal(number(), 1, 'Outer scope still works.');
});

上述代码等同于：

test('Function declaration hoisted.', function () {
  function number() {
    return 1;
  }

  (function () {
    function number() {
      return 2;
    }

    equal(number(), 2, 'Inner scope wins.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

不过函数表达式则另当别论，因为它们仅仅是变量声明的另一种形式，所以其提升行为与变量提升行为等同。

test('Function expression hoisting', function () {
  function number() {
    return 1;
  }

  (function () {
    try {
      number();
    } catch (e) {
      ok(true, 'number() is undefined.');
    }

    var number = function number() {
      return 2;
    }

    equal(number(), 2, 'number() is defined now.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

在上述示例中，名为Number的变量在声明阶段会被提升，但它所对应的函数体则不会被提升，因为Number仅仅是函数表达式而非函数声明。它的赋值操作直到运行阶段才会被执行，代码等同于：

test('Function Expression Hoisted', function () {
  function number() {
    return 1;
  }

  (function () {
    var number; // Declaration initialized to undefined.

    try {
      number();
    } catch (e) {
      ok(true, 'number() is undefined.');
    }

    number = function number() {
      return 2;
    }

    equal(number(), 2, 'number() is defined now.');
  }());

  equal(number(), 1, 'Outer scope still works.');
});

注意： 这几个例子是为了告诉你，在进行与作用域有关的操作时，要谨记变量提升的规律。如果你有将所有变量声明放置在函数顶端的编码习惯，或者你对待函数向来都是先声明再使用，那么你完全可以忽略它们。