《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.'); });

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

相关资源：JavaScript高级程序设计