深入理解JavaScript中的作用域与变量提升机制

JavaScript中的作用域与变量提升机制

你是否好奇，运行以下JavaScript代码片段后，弹出的提示框会显示什么数值？

 
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
} 
alert(foo);
} 
bar();

如果答案是"10"令你感到惊讶的话，那么下面这个会让你更加困惑：

代码结束。

var a = 1;

function b() {

a = 10;

return;

function a() {}

b();

alert(a);

代码结束。

浏览器最终会弹出“1”。这看似怪异、甚至带有危险性，实则是JavaScript语言中一种强大且富有表现力的特性。虽然我不确定是否有标准明确定义此行为，但我习惯称之为“变量提升”（hoisting）。本文旨在解释这一机制，但在此之前，我们需要先厘清JavaScript中的作用域（scoping）概念。

JavaScript中的作用域

JavaScript中的作用域

对于JavaScript初学者而言，作用域往往是令人困惑的难点之一。事实上，许多经验丰富的JavaScript开发者也难以完全掌握它。JavaScript作用域之所以复杂，是因为其语法结构与C系语言极为相似。请看下面的C语言程序：

 
#include <stdio.h>
int main() {
int x = 1;
printf("%d, ", x); // 输出 1
if (1) {
int x = 2;
printf("%d, ", x); // 输出 2
} 
printf("%d\n", x); // 输出 1
} 

该程序的输出结果为“1, 2, 1”。这是因为在C系语言中存在块级作用域（block-level scope）。当进入一个代码块（如if语句）时，会声明新的变量，这些变量仅在该块级作用域内有效，不会影响外部作用域。然而，JavaScript并非如此。你可以在Firebug中尝试以下代码：

 
var x = 1;
console.log(x); // 输出 1
if (true) {
var x = 2;
console.log(x); // 输出 2
} 
console.log(x); // 输出 2

在这段代码中，Firebug显示的结果是“1, 2, 2”。这是因为JavaScript采用函数级作用域（function-level scope），这与C系语言截然不同。像if语句这样的代码块并不会创建新的作用域，只有函数才能创建新的作用域。

对于熟悉C、C++、C#或Java的程序员来说，这往往出乎意料且令人不适。幸运的是，得益于JavaScript函数的灵活性，我们有一个解决方案。如果你必须在函数内部创建一个临时作用域，可以参照以下方式操作：

 
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// 其他代码
}()); 
} 
// 此时 x 仍为 1。
} 

这种方式非常灵活，适用于任何需要创建临时作用域的场景，而不仅仅局限于某个代码块。但我强烈建议你花时间深入理解JavaScript的作用域机制。它非常强大，也是我最喜欢的语言特性之一。如果你能很好地理解作用域，那么理解变量提升将会容易得多。

声明、名称与变量提升

声明、名称与变量提升

在JavaScript中，一个作用域（scope）内的名称（name）有四种来源：

1. 语言自身定义（Language-defined）：所有作用域默认包含this和arguments。

2. 函数形参（Formal parameters）：带有名称的函数形参会进入函数体的作用域。

3. 函数声明（Function declarations）：通过function foo() {}的形式定义。

4. 变量声明（Variable declarations）：通过var foo;的形式定义。

函数声明和变量声明总是会被JavaScript解释器隐式地提升到包含它们的作用域的最顶端。显然，语言自身定义和函数形参已经处于作用域的顶端。这就像下面的代码：

 
function foo() {
bar();
var x = 1;
} 

实际上，解释器会将其处理为如下形式：

 
function foo() {
var x;
bar();
x = 1;
} 

这意味着，无论声明是否被执行，结果都是一样的。以下两段代码是等价的：

 
function foo() {
if (false) {
var x = 1;
} 
return;
var y = 1;
} 
function foo() {
var x, y;
if (false) {
x = 1;
} 
return;
y = 1;
} 

请注意，只有声明部分被提升，赋值部分并未提升。这与函数声明不同，函数声明会将整个函数体一起提升。但请记住，定义函数通常有两种方式。考虑以下JavaScript代码：

 
function test() {
foo(); // TypeError "foo is not a function"
bar(); // "this will run!"
var foo = function () { // 函数表达式赋值给变量'foo'
alert("this won't run!");
} 
function bar() { // 名为'bar'的函数声明
alert("this will run!");
} 
} 
test();

在这里，只有函数声明的方式会将函数体一起提升，而函数表达式只会提升名称，函数体只有在执行到赋值语句时才会被赋值。

以上就是关于变量提升（hoisting）的基础知识，看起来并不复杂或令人困惑，对吧？但这是JavaScript，在某些特殊情况下，总会有一些复杂之处。

名称解析顺序与命名函数表达式

名称解析顺序

需要记住的最重要的特例就是名称解析顺序（name resolution order）。请记住，一个名称进入作用域共有四种方式，我上面列出的顺序即为它们解析的顺序。总的来说，如果一个名称已经被定义，它绝不会被另一个拥有不同属性的同名名称覆盖。这意味着，函数声明比变量声明具有更高的优先级。但这并不意味着对该名称的赋值无效，仅仅是声明部分会被忽略。然而，存在以下几个例外：

内置名称arguments的行为有些怪异。它似乎在形参之后、函数声明之前被声明。这意味着名为arguments的形参会比内置的arguments具有更高的优先级，即使这个形参是undefined。这是一个不良特性，请避免使用arguments作为形参名。

在任何地方试图使用this作为标识符都会引起语法错误，这是一个良好的特性。

如果有多个同名形参，位于列表最后的形参拥有最高的优先级，即使它是undefined。

命名函数表达式

你可以在函数表达式中给函数定义名称，就像函数声明语句一样。但这并不会使它成为函数声明，该名称也不会被引入到作用域中，且函数体也不会被提升（hoist）。以下代码可以说明我的意思：

 
foo(); // TypeError "foo is not a function"
bar(); // 有效
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"
var foo = function () {}; // 匿名函数表达式（'foo'被提升）
function bar() {}; // 函数声明（'bar'和函数体被提升）
var baz = function spam() {}; // 命名函数表达式（只有'baz'被提升）
foo(); // 有效
bar(); // 有效
baz(); // 有效
spam(); // ReferenceError "spam is not defined"

如何利用这些知识编写代码与标准规定

如何利用这些知识编写代码

既然你已经了解了作用域和提升机制，那么这对编写JavaScript代码意味着什么呢？最重要的一条是，声明变量时总是使用var语句。我强烈建议你在每个作用域中都只在最顶端使用一个var语句。如果你强制自己这么做，就永远不会被提升相关的问题所困扰。尽管这会使跟踪当前作用域实际声明了哪些变量变得更加困难。我建议在JSLint中使用onevar选项。如果你遵循了上述所有建议，你的代码看起来应该像这样：

 
/*jslint onevar: true [...] */
function foo(a, b, c) {
var x = 1,
bar,
baz = "something";
} 

标准是如何规定的

我发现直接参考ECMAScript标准（pdf）来理解这些机制是如何运作的是很有用的。以下是关于变量声明和作用域的一段摘录（section 12.2.2）：

If the variable statement occurs inside a FunctionDeclaration, the variables are defined with function-local scope in that function, as described in section 10.1.3. Otherwise, they are defined with global scope (that is, they are created as members of the global object, as described in section 10.1.3) using property attributes { DontDelete }. Variables are created when the execution scope is entered. A Block does not define a new execution scope. Only Program and FunctionDeclaration produce a new scope. Variables are initialised to undefined when created. A variable with an Initialiser is assigned the value of its AssignmentExpression when the VariableStatement is executed, not when the variable is created.

我希望这篇文章能为JavaScript程序员最困惑的部分提供一些启示。我尽力写得全面，以免引起更多的困惑。如果我写错了或漏掉了某些重要的内容，请一定告知我。