[译]Javascript 作用域和变量提升

标签： javascript 作用域 变量提升 | 发表时间：2013-06-13 13:16 | 作者：
出处：http://justjavac.iteye.com

下面的程序是什么结 果？

 
  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.

 

吓你一跳吧？发生了什么事情？这可能是陌生的，危险的，迷惑的，同样事实上也是非常有用和印象深刻的javascript语言特性。对于这种表现行为，我不知道有没有一个标准的称呼，但是我喜欢这个术语：“Hoisting (变量提升)”。这篇文章将对这种机制做一个抛砖引玉式的讲解，但是，首先让我们对javascript的作用域有一些必要的理解。

Javascript的作用域

对于Javascript初学者来说，一个最迷惑的地方就是作用域；事实上，不光是初学者。我就见过一些有经验的javascript程序员，但他们对scope理解不深。javascript作用域之所以迷惑，是因为它程序语法本身长的像C家族的语言，像下面的C程序：

 
  1. #include <stdio.h>  
  2. int main() {  
  3.     int x = 1;  
  4.     printf("%d, ", x); // 1  
  5.     if (1) {  
  6.         int x = 2;  
  7.         printf("%d, ", x); // 2  
  8.     }  
  9.     printf("%d\n", x); // 1  
  10. }  

输出结果是1 2 1，这是因为C家族的语言有块作用域，当程序控制走进一个块，比如if块，只作用于该块的变量可以被声明，而不会影响块外面的作用域。但是在Javascript里面，这样不行。看看下面的代码：

 
  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。因为javascript是函数作用域。这是和c家族语言最大的不同。该程序里面的if并不会创建新的作用域。

 

对于很多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特性之一。如果你理解了作用域，那么变量提升就对你显得更有意义。

 

变量声明，命名，和提升

在javascript，变量有4种基本方式进入作用域：

  • 1 语言内置：所有的作用域里都有this和arguments；(译者注：经过测试arguments在全局作用域是不可见的)
  • 2 形式参数：函数的形式参数会作为函数体作用域的一部分；
  • 3 函数声明：像这种形式：function foo(){}；
  • 4 变量声明：像这样：var foo；

函数声明和变量声明总是会被解释器悄悄地被“提升”到方法体的最顶部。这个意思是，像下面的代码：

 
  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. }  

请注意，变量赋值并没有被提升，只是声明被提升了。但是，函数的声明有点不一样，函数体也会一同被提升。但是请注意，函数的声明有两种方式：

 
  1. function test() {  
  2.     foo(); // TypeError "foo is not a function"  
  3.     bar(); // "this will run!"  
  4.     var foo = function () { // 变量指向函数表达式  
  5.         alert("this won't run!");  
  6.     }  
  7.     function bar() { // 函数声明 函数名为bar  
  8.         alert("this will run!");  
  9.     }  
  10. }  
  11. test();  

这个例子里面，只有函数式的声明才会连同函数体一起被提升。foo的声明会被提升，但是它指向的函数体只会在执行的时候才被赋值。

 

上面的东西涵盖了提升的一些基本知识，它们看起来也没有那么迷惑。但是，在一些特殊场景，还是有一定的复杂度的。

变量解析顺序

最需要牢记在心的是变量解析顺序。记得我前面给出的命名进入作用域的4种方式吗？变量解析的顺序就是我列出来的顺序。一般来说，如果一个名称已经被定义，则不会被其他相同名称的属性覆盖。这是说，(译者没理解这句，所以先做删除样式)  函数的声明比变量的声明具有高的优先级。这并不是说给那个变量赋值不管用，而是声明不会被忽略了。 (译者注: 关于函数的声明比变量的声明具有高的优先级,下面的程序能帮助你理解)

 
  1. <script>  
  2. function a(){     
  3. }  
  4. var a;  
  5. alert(a);//打印出a的函数体  
  6. </script>  
  7.   
  8. <script>  
  9.   
  10. var a;  
  11. function a(){     
  12. }  
  13. alert(a);//打印出a的函数体  
  14. </script>  
  15. //但是要注意区分和下面两个写法的区别:  
  16. <script>  
  17. var a=1;  
  18. function a(){     
  19. }  
  20. alert(a);//打印出1  
  21. </script>  
  22.   
  23. <script>  
  24. function a(){     
  25. }  
  26.   
  27. var a=1;  
  28.   
  29. alert(a);//打印出1  
  30. </script>  


这里有3个例外：
1 内置的名称arguments表现得很奇怪，他看起来应该是声明在函数形式参数之后，但是却在函数声明之前。这是说，如果形参里面有arguments，它会比内置的那个有优先级。这是很不好的特性，所以要杜绝在形参里面使用arguments；
2 在任何地方定义this变量都会出语法错误，这是个好特性；
3 如果多个形式参数拥有相同的名称，最后的那个具有优先级，即便实际运行的时候它的值是undefined；

 

命名函数

你可以给一个函数一个名字。如果这样的话，它就不是一个函数声明，同时，函数体定义里面的指定的函数名( 如果有的话,如下面的spam, 译者注)将不会被提升,　而是被忽略。这里一些代码帮助你理解：

 
  1. foo(); // TypeError "foo is not a function"  
  2. bar(); // valid  
  3. baz(); // TypeError "baz is not a function"  
  4. spam(); // ReferenceError "spam is not defined"  
  5.   
  6. var foo = function () {}; // foo指向匿名函数  
  7. function bar() {}; // 函数声明  
  8. var baz = function spam() {}; // 命名函数，只有baz被提升，spam不会被提升。  
  9.   
  10. foo(); // valid  
  11. bar(); // valid  
  12. baz(); // valid  
  13. spam(); // ReferenceError "spam is not defined"  

 

怎么写代码

现在你理解了作用域和变量提升，那么这对于javascript编码意味着什么？最重要的一点是，总是用var定义你的变量。而且我强烈推荐，对于一个名称，在一个作用域里面永远只有一次var声明。如果你这么做，你就不会遇到作用域和变量提升问题。

语言规范怎么说

我发现ECMAScript参考文档总是很有用。下面是我找到的关于作用域和变量提升的部分：
如果变量在函数体类声明，则它是函数作用域。否则，它是全局作用域（作为global的属性）。变量将会在执行进入作用域的时候被创建。块不会定义新的作用域，只有函数声明和程序（译者以为，就是全局性质的代码执行）才会创造新的作用域。变量在创建的时候会被初始化为undefined。如果变量声明语句里面带有赋值操作，则赋值操作只有被执行到的时候才会发生，而不是创建的时候。

我期待这篇文章会对那些对javascript比较迷惑的程序员带来一丝光明。我自己也尽最大的可能去避免带来更多的迷惑。如果我说错了什么，或者忽略了什么，请告知。

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



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [javascript 作用域 变量提升] 推荐：

[译]Javascript 作用域和变量提升

- - justjavac(迷渡)
下面的程序是什么结 果. 这可能是陌生的，危险的，迷惑的，同样事实上也是非常有用和印象深刻的javascript语言特性. 对于这种表现行为，我不知道有没有一个标准的称呼，但是我喜欢这个术语：“Hoisting (变量提升)”. 这篇文章将对这种机制做一个抛砖引玉式的讲解，但是，首先让我们对javascript的作用域有一些必要的理解.

JavaScript变量作用域

- ~Wing~ - 博客园-首页原创精华区
变量作用域是程序中定义这个变量的区域. 先贴一段代码，如果读者对代码的输出并不感到困惑就不用往下面读了. /* 代码1 */ var scope = "global "; function checkScope() {. document.write(scope); //输出"local". //输出"childLocal".

javascript的词法作用域

- 恋上女人香 - 断桥残雪部落格
大家应该写过下面类似的代码吧，其实这里我想要表达的是有时候一个方法定义的地方和使用的地方会相隔十万八千里，那方法执行时，它能访问哪些变量，不能访问哪些变量，这个怎么判断呢. 这个就是我们这次需要分析的问题——词法作用域. 词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域.

JavaScript 函数、作用域和继承

- - 幸福收藏夹
关于函数、作用域和继承，可以写的非常多. 不过和 JavaScript 类型浅解 一样，是写给初学者看的，我们着重从简单的来. 当然，即使用「简单」来描述，这也是 JavaScript 中最不容易懂的点之一. 如你所见， function fn(){}，像这个声明式函数. 虽然初学看起来有点乱，不过我想说的是，你总会知道如何用的，现在知道就可以了.

JavaScript变量作用域探究

- - JavaScript - Web前端 - ITeye博客
JavaScript变量作用域探究. 前段时间，在coding的时候，碰到了当时感觉不可思议的问题. 当时对这个问题很困惑，回去恶补了下JS变量的相关知识，发现还是自己的基础知识掌握的不够扎实，于是决定探究下JS变量的相关机制. 如果你对上面的结果也有疑问，我相信看完下面的讲解之后，再看这问题，天空飘来五个字：“那都不叫事”.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前，我谈了一点Javascript的历史. 今天把这部分补全，从历史的角度，说明Javascript到底是如何设计出来的. 只有了解这段历史，才能明白Javascript为什么是现在的样子. 我依据的资料，主要是Brendan Eich的自述. "1994年，网景公司（Netscape）发布了Navigator浏览器0.9版.

JavaScript，你懂的

- dylan - keakon的涂鸦馆
经常有人问我，JavaScript应该怎么学. 先学基本语法，如果曾学过C等语言，应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API，熟悉它能干什么；而在学习DOM API的过程中，你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包，学会至少一个常用的JavaScript库（例如jQuery）.

Javascript 里跑Linux

- rockmaple - Shellex&#39;s Blog
牛逼到暴的大拿 Fabrice Bellard，用Javascript实现了一个x86 PC 模拟器，然后成功在这个模拟器里面跑Linux（请用Firefox 4 / Google Chrome 11打开，Chome 12有BUG）. 关于这个东西… 伊说 “I did it for fun“，大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上，网页中不会有大量的脚本，至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序，脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多，因此提高脚本的性能变得很重要. 对于桌面应用程序，通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客
　　注：本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文. 　　如果三年前你问我应该学什么语言，我会告诉你是Ruby. 　　如果你现在想学一门语言的话，你应该学习JavaScript.. 　　我认为，每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.