【翻译】JavaScript中的作用域和声明提前

原文：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

===翻译开始===

你知道下面的JavaScript脚本执行结果是什么吗？

1 var foo=1;

2 function bar(){

3     if(!foo){

4         var foo=10;

5     }

6     alert(foo);

7 }

8 bar();

如果你对弹出的结果是"10"感到惊讶的话，那么下面这段脚本会让你晕头转向的:

1 var a=1;

2 function b(){

3     a=10;

4     return ;

5     function a(){};

6 }

7 b();

8 alert(a);

浏览器会弹出"1",这到底是怎么回事呢？这看起来很奇怪，事实上这恰好是语言的一个强大而又富有表现力的特性。我不知道这种特别的行为是否有一个标准的命名，但我喜欢把它叫做"hoisting"。接下来我会试着分析一下这种机制，但是我们有必要先理解一下JavaScript的作用域。

JavaScript中的作用域

对于JavaScript初学者来说，作用域常让他们感到困惑。事实上，一些资深的JavaScript开发者也不是完全理解作用域。JavaScript的作用域之所以让人如此困惑，因为它跟C系语言有点相似，请看下面的C程序:

 1 #include <stdio.h>

 2 int main(){

 3     int x=1;

 4     printf("%d\n",x);//1

 5     if(1){

 6         int x=2;

 7         printf("%d\n",x);//2

 8     }

 9     printf("%d\n",x);//1

10 }

程序会依次输出1,2,1，这是因为C系语言有块级作用域。当程序运行到一个程序块的时候(比如if语句)，在该程序块里定义的新变量不会影响到外部作用域。但在JavsScript中却不相同，试着执行下面的脚本:

1 var x=1;

2 console.log(x);//1

3 if(true){

4     var x=2;

5     console.log(x);//2

6 }

7 console.log(x);//2

脚本执行后会依次输出1,2,2，这是因为JavsScript只有函数级作用域，这和C系语言有着根本的不同，程序块(比如if语句)是不会创建新的作用域的，只有函数才会。

对于一些使用C、C++、C#或者Java语言的开发者来说，这简直让人难以接受。还好JavaScript的函数足够灵活，可以用其它变通方法。如果你一定要在函数内创建一个临时的作用域，可以这样做:

 1 function foo(){

 2     var x=1;

 3     if(x){

 4         (function(){

 5             var x=2;

 6             //some other code

 7         }());

 8     }

 9     //x is still 1.

10 }

这个方法相当灵活，在任何需要的地方都可以使用，不止在块语句里。但是我强烈建议你花一些时间来真正理解和欣赏JavaScript的作用域，这是我最喜欢的语言特性之一，它真的非常强大。如果你理解了作用域，那么对于声明提前你会更容易理解。

声明，变量名，声明提前

在JavaScript中，一个变量可以通过以下四种方式之一进入作用域：

1、语言内置：所有作用域都默认包含"this"和"arguments"变量。

2、函数形参：函数可以拥有形参，所属作用域就是该函数体。

3、函数声明：形如"function foo(){}"的声明。

4、变量声明：形如"var foo;"的声明。

函数声明和变量声明总会被JavaScript解释器自动放到所属作用域的顶端，函数参数和语言内置的变量默认都是在最顶端。举个例子，有如下代码:

1 function foo(){

2     bar();

3     var x=1;

4 }

被解析器解析后变为:

1 function foo(){

2     var x;

3     bar();

4     x=1;

5 }

这说明了，无论声明语句放在哪里都会被执行，比如说下面两个函数，它们是相等的:

 1 function foo(){

 2     if(false){

 3         var x=1;

 4     }

 5     return;

 6     var y=1;

 7 }

 8 

 9 function foo(){

10     var x,y;

11     if(false){

12         x=1;

13     }

14     return;

15     y=1;

16 }

要注意的是，有时声明和赋值会写在一起，但是赋值部分并没有被提前，只有声明被提前了。函数声明就有些特别了，整个函数体也会被提前。但是不要忘了函数声明有两种方式，请看下面的代码:

 1 function test(){

 2     foo(); //TypeError "foo is not a function"

 3     bar(); //"this will run!"

 4     var foo=function(){ //function expression assigned to local variable "foo"

 5         alert('this won't run!');

 6     };

 7     function bar(){//function declaration,given the name 

 8         alert('this will run!');

 9     }

10 }

11 test();

在这个例子里，只有使用函数声明的函数体会被提前至顶端，而使用函数表达式赋值方式，只有名字"foo"被提前至顶端，函数体是没有的。

上面的例子基本覆盖了自动提前的情况，看起来并不是那么复杂让人迷惑。当然，一些其它比较特别的例子还是有一些复杂的。

变量识别顺序

我们要特别记住变量的识别顺序，前面说过变量名进入作用域有四种方式，我上面列举的顺序就是它们被识别的顺序。通常，如果一个变量名已经定义了，那么它就不会被其它相同名称的变量所覆盖。这意味着函数声明比变量声明优先级高，但这并不影响赋值操作，只是声明部分会被忽略而已。

PS:补充一段代码，表达作者的意思

function foo(){}

var foo=3;

console.log(foo);//3



这段代码会被解析为:

function foo(){}

//var foo; //这条语句就被忽略了

foo=3;

console.log(foo);



依我理解是这样子:

var foo;

foo=function foo(){}

foo=3;

console.log(foo);

接着原文，以下是几种特别情况:

1、内置的变量"arguments"表现比较奇怪，它好像定义在函数形参和函数声明之间。这意味着如果形参中有个变量为"arguments"，那么它的优先级将高于内置的"arguments"，即使它是undefined。这不是一个好的特性，不要使用"arguments"作为形参变量名。

2、使用"this"作为一个标识符会引起语法错误，这是一个好的特性。

3、如果多个形参中出现同名，那么最后一个将拥有最高的优先级，即使它是undefined。

带有名字的函数表达式

你也可以给函数表达式中的函数起个名字，采用类似函数声明的语法。但这并不能使它变成一个函数声明，并且这个函数名不会被添加到作用域，函数体也不会被提前至顶端，下面用一些代码来演示我说的意思:

 1 foo(); //TypeError "undefined is not a function"

 2 bar(); //valid

 3 baz(); //TypeError "undefined is not a function"

 4 spam();//ReferenceError "spam is not defined"

 5 

 6 var foo=function(){}; //anonymous function expression('foo' get hoisted)

 7 function bar(){};     //function declaration ('bar' and the function body get hoisted)

 8 var baz=function spam(){};//named function expression('only 'baz' get hoisted)

 9 

10 foo(); //valid

11 bar(); //valid

12 baz(); //valid

13 spam();//ReferenceError "spam is not defined"

怎么利用这些知识编程

现在你已经理解作用域和声明提前特性了，那么这些在JavaScript编程中有什么影响？最重要的是声明变量时要使用"var"关键字，我强烈建议你在每个作用域的顶端只写一个var语句(多变量的时候，用逗号连接)。如果你强制自己这样做，就不会对声明提升产生困惑了。不过，这么做会让你在当前作用域中寻找已经声明的变量变得更困难，我建议使用"JSLint"的"onevar"选项来验证代码，如果你照做了，你的代码看起来会像这样子:

1 /*jslint onevar: true [...]*/

2 function foo(a,b,c){

3     var x=1,

4         bar,

5         baz="something";

6 }

看看规范怎么说

我发现经常查阅ECMAScript规范文档有助于直接理解这些机制是怎么运行的，以下是规范对于变量声明和作用域的描述：

1 如果变量声明语句在函数声明里面，那么变量就是定义在函数内部作用域(参考章节10.1.3)，否则它们就是定义在全局作用域内(作为全局对象的成员变量，参考章节10.1.3)。变量进入作用域的时候就会被创建，块语句不会定义一个新的执行作用域，只有程序和函数声明会产生新的作用域。变量在创建的时候会被初始化为"undefined"，一个带有初始化语句的变量，在赋值语句执行的时候才会被赋上其赋值表达式对应的值，并不是变量创建的时候就赋值。

我希望这篇文章能够帮助JavaScript开发者理清一些困惑的问题，我已经尽可能的彻底把问题讲清楚，以免造成更多的疑惑。如果你发现我写错了或者遗漏了某些重要的东西，请一定让我知道。

===翻译完===

翻译参考：http://ju.outofmemory.cn/entry/85659

以下是一个例子:

 1 var x=0;

 2 var f=function(){

 3     x=1;

 4 }

 5 f();

 6 console.log(x);

 7 function f(){

 8     x=2;

 9 }

10 f();

11 console.log(x);