`
zha_zi
  • 浏览: 581900 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

js变量提升

阅读更多

下面的程序是什么结果?

[javascript] view plaincopy
 
  1. var foo = 1;  
  2. function bar() {  
  3.     if (!foo) {  
  4.         var foo = 10;  
  5.     }  
  6.     alert(foo);  
  7. }  
  8. bar();  

结果是10;

 

那么下面这个呢?

[javascript] view plaincopy
 
  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程序:

[cpp] view plaincopy
 
  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里面,这样不行。看看下面的代码:

[javascript] view plaincopy
 
  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函数的灵活性,这里有可变通的地方。如果你必须创建临时的作用域,可以像下面这样:

[javascript] view plaincopy
 
  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;

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

[javascript] view plaincopy
 
  1. function foo() {  
  2.     bar();  
  3.     var x = 1;  
  4. }  

实际上会被解释成:

[javascript] view plaincopy
 
  1. function foo() {  
  2.     var x;  
  3.     bar();  
  4.     x = 1;  
  5. }  

无论定义该变量的块是否能被执行。下面的两个函数实际上是一回事:

[javascript] view plaincopy
 
  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. }  

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

[javascript] view plaincopy
 
  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种方式吗?变量解析的顺序就是我列出来的顺序。一般来说,如果一个名称已经被定义,则不会被其他相同名称的属性覆盖。这是说,(译者没理解这句,所以先做删除样式) 函数的声明比变量的声明具有高的优先级这并不是说给那个变量赋值不管用,而是声明不会被忽略了。 (译者注: 关于函数的声明比变量的声明具有高的优先级,下面的程序能帮助你理解)

[javascript] view plaincopy
 
  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, 译者注)将不会被提升, 而是被忽略。这里一些代码帮助你理解:

[javascript] view plaincopy
 
  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比较迷惑的程序员带来一丝光明。我自己也尽最大的可能去避免带来更多的迷惑。如果我说错了什么,或者忽略了什么,请告知。

译者补充

xu281828044提醒了我发现了IE下全局作用域下命名函数的提升问题:
我翻译文章的时候是这么测试的:

[html] view plaincopy
 
  1. <script>  
  2. functiont(){  
  3. spam();  
  4. var baz = function spam() {alert('this is spam')};  
  5. }  
  6. t();  
  7. </script>  

这种写法, 即非全局作用域下的命名函数的提升,在ie和ff下表现是一致的. 我改成:

[html] view plaincopy
 
  1. <script>  
  2. spam();  
  3. var baz = function spam() {alert('this is spam')};  
  4. </script>  

则ie下是可以执行spam的,ff下不可以. 说明不同浏览器在处理这个细节上是有差别的.

 

这个问题还引导我思考了另2个问题,1:对于全局作用于范围的变量,var与不var是有区别的. 没有var的写法,其变量不会被提升。比如下面两个程序,第二个会报错:

 

[html] view plaincopy
 
  1. <script>  
  2. alert(a);  
  3. var a=1;  
  4. </script>  
[html] view plaincopy
 
  1. <script>  
  2. alert(a);  
  3. a=1;  
  4. </script>  

 

2: eval中创建的局部变量是不会被提升的(它也没办法做到).

[html] view plaincopy
 
  1. <script>  
  2. var a = 1;  
  3. function t(){  
  4.     alert(a);  
  5.     eval('var a = 2');  
  6.     alert(a);  
  7. }  
  8. t();  
  9. alert(a);  
  10. </script>  
分享到:
评论
1 楼 sgsy_2013 2016-08-16  
js的变量提升这个设计到底有什么用,出于什么目的做这样的设计?




相关推荐

    JS变量提升原理与用法实例浅析

    本文实例讲述了JS变量提升。分享给大家供大家参考,具体如下: 该篇介绍什么是变量提升,写给像我一样的JS新手看的 简单来说变量提升就是 JS会把var变量的声明自动提升到作用域的顶部,即使你不想这样 一个例子: (局部...

    最通俗易懂的javascript变量提升详解

    下面小编就为大家带来一篇最通俗易懂的javascript变量提升详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JS变量提升及函数提升实例解析

    主要介绍了JS变量提升及函数提升实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    JavaScript变量提升和严格模式实例分析

    本文实例讲述了JavaScript变量提升和严格模式。分享给大家供大家参考,具体如下: 1.什么是变量提升 所谓的变量提升指的是:函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体(作用域)的最顶部。 下面我们...

    javascript变量提升和闭包理解

    本篇文章给大家详细分析了javascript变量提升和闭包的相关知识点,对此有兴趣的朋友可以参考下。

    JavaScript 变量提升 | 执行上下文 | 作用域

    文章目录变量提升执行上下文全局执行上下文函数执行上下文执行上下文栈作用域例题举个栗子 执行上下文栈:举个栗子 变量提升+执行上下文栈:举个栗子 预处理顺序举个栗子 预处理举个栗子 顺序执行举个栗子 作用域举...

    JavaScript中变量提升和函数提升的详解

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升。这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下。 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3....

    js变量提升深入理解

    下面小编就为大家带来一篇js变量提升深入理解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    基于js的变量提升和函数提升(详解)

    一、变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。 上个简历的例子如: console.log...

    JavaScript 变量提升

    JavaScript 变量提升 JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。 JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。 以下两个实例将获得相同的结果: 实例 1 x = 5; // 变量 x...

    详解javascript 变量提升(Hoisting)

    主要介绍了详解javascript 变量提升(Hoisting),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    【JavaScript源代码】JavaScript中变量提升和函数提升实例详解.docx

    【JavaScript源代码】JavaScript中变量提升和函数提升实例详解.docx

    详解javascript中的变量提升和函数提升

    主要介绍了详解javascript中的变量提升和函数提升的相关资料,需要的朋友可以参考下

    JavaScript中的变量提升与函数提升

    相信大家在学习JS的过程中,会遇到一个词,叫做“预解析”,什么是预解析呢,预解析就是说我程序在执行前,会先检查代码有没有语法错误,就是...声明提升包括两个部分,就是变量提升与函数提升。 首先我们先来看变量提

Global site tag (gtag.js) - Google Analytics