注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

javascript中变量声明提升(Hoisting)的理解  

2011-04-13 13:58:17|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Hoisting Explained

Consider the following code:

  1. var myvar = 'my value';  
  2. alert(myvar); // my value  

Okay, of course the alert will display “my value.” That’s obvious; however, stick with me. Let’s next create an immediate function, which alerts the same value.

  1. var myvar = 'my value';  
  2.   
  3. (function() {  
  4.   alert(myvar); // my value  
  5. })();  

All right, all right. Still obvious, I know. Now, let’s throw a wrench into the mix, and create a local variable within this anonymous function of the same name.

  1.   var myvar = 'my value';  
  2.   
  3. (function() {  
  4.   alert(myvar); // undefined  
  5.   var myvar = 'local value';  
  6. })();  

Huh? Why is the alert now displaying undefined? Even though we’ve declared a new variable, it’s still below the alert; so it shouldn’t have an effect, right? Wrong.

Variable Declarations are Hoisted

Within its current scope, regardless of where a variable is declared, it will be, behind the scenes, hoisted to the top. However, only the declaration will be hoisted. If the variable is also initialized, the current value, at the top of the scope, will initially be set to undefined.

Okay, let’s decipher the difference between the terms, declaration and initialization. Assume the following line: var joe = 'plumber';

Declaration
  1. var joe; // the declaration  
Initialization
  1. joe = 'plumber'// the initialization  

Now that we understand the terminology, we can more easily comprehend what’s happening under the hood. Consider the following bogus function.

  1. (function() {  
  2.   var a = 'a';  
  3.   // lines of code  
  4.   var b = 'b';  
  5.   // more lines of code  
  6.   var c= 'c'// antipattern  
  7.   // final lines of scripting  
  8. })();  

Declare all variables at the top.

Note that what’s exemplified above is considered to be bad practice. Nonetheless, behind the scenes, all of those variable declarations — regardless of where they occur in the function scope — will be hoisted to the top, like so:

  1. (function() {  
  2.   var a, b, c; // variables declared  
  3.   a = 'a';  
  4.   // lines of code  
  5.   b = 'b'// initialized  
  6.   // more lines of code  
  7.   c= 'c'// initialized  
  8.   // final lines of scripting  
  9. })();  
  10. Aha Moment

    If we now return to the original confusing undefined piece of code, from above:

    1.  var myvar = 'my value';  
    2.   
    3. (function() {  
    4.   alert(myvar); // undefined  
    5.   var myvar = 'local value';  
    6. })();  

    It should now make perfect sense why myvar is alerting undefined. As we learned, as soon as the local variable, myvar, was declared, it was automatically hoisted to the top of the function scope…above the alert. As a result, the variable had already been declared at the time of the alert; however, because initializations aren’t hoisted as well, the value of the variable is: undefined.

    原文:http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/

  评论这张
 
阅读(2626)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017