【转载】【翻译】JavaScript Scoping and Hoisti…

原文链接：http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

你知道下面的JavaScript代码执行后会alert出什么值吗？

 1 var foo = 1;
 2 function bar() {
 3 　　if (!foo) {
 4 　　var foo = 10;
 5 　　}
 6 
 7 　　alert(foo);
 8 　　}
 9 
10 bar();

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

1 var a = 1;
2 function b() {
3 　　a = 10;
4 　　return;
5 function a() {}
6 }
7 b();
8 alert(a);

浏览器会alert“1”。那么，到底是怎么了？尽管这看起来有点奇怪、有点危险又有点令人困惑，但这事实上却是这门语言一个强力的具有表现力的特性。我不知道是不是有个标准来定义这种行为，但是我喜欢用”hoisting”来描述。这篇文章试着去解释这种机制，但是首先，让我们对JavaScript的scoping做一些必要的了解。

Scoping in JavaScript

对于JavaScript新手来说scoping是最令人困惑的部分之一。事实上，不仅仅是新手，我遇到或很多有经验的JavaScript程序员也不能完全理解scoping。JavaScript的scoping如此复杂的原因是它看上去非常像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中试试下面的代码：

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

在这段代码中，Firebug显示1，2,2。这是因为JavaScript是函数级作用域(function-level scope)。这和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 scoping。它实在是非常强力，而且它也是我最喜欢的语言特性之一。如果你很好的理解了scoping，理解hoisting将会更加容易。

Declarations, Names, and Hoisting

在JavaScript中，一个作用域(scope)中的名称(name)有以下四种：

1. 语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。

2. 函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。

3. 函数声明(Function decalrations): 通过function foo() {}的形式。

4. 变量声明(Variable declarations): 通过var foo;的形式。

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

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 function foo() {
 9 　　var x, y;
10 　　if (false) {
11 　　　　x = 1;
12 　　}
13　　 return;
14 　　y = 1;
15　　 }

注意到声明的赋值部分并没有被提升(hoist)。只有声明的名称被提升了。这和函数声明不同，函数声明中，整个函数体也都会被提升。但是请记住，声明一个函数一般来说有两种方式。考虑下面的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

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

 1 　foo(); // TypeError "foo is not a function"
 2 
 3   bar(); // valid
 4   baz(); // TypeError "baz is not a function"
 5 
 6   spam(); // ReferenceError "spam is not defined"
 7    
 8 
 9   var foo = function () {}; // 匿名函数表达式('foo'被提升)
10 
11   function bar() {}; // 函数声明('bar'和函数体被提升)
12 
13   var baz = function spam() {}; // 命名函数表达式(只有'baz'被提升)
14    
15   foo(); // valid
16 
17   bar(); // valid
18 
19   baz(); // valid
20 
21   spam(); // ReferenceError "spam is not defined"

1  /*jslint onevar: true [...] */
2 
3  function foo(a, b, c) {
4 
5       var x = 1,
6           bar,
7 
8           baz = "something";
9   }

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有