javascript中错误使用var造成undefined

 更新时间:2016年03月31日 16:02:04   作者:MingChaoSun  
这篇文章主要介绍了javascript中错误使用var造成undefined的原因,实例分析了错误使用var造成undefined的过程,感兴趣的小伙伴们可以参考一下

在javascript中根据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量可以被所有的脚本访问;在函数中定义的变量是局部变量,局部变量只在函数内有效。
如果全局变量和局部变量使用相同的变量名,则局部变量将会覆盖全局变量。
例子代码:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>js中全局变量与局部变量</title> 
  </head> 
  <body> 
    <script type="text/javascript"> 
      var a = "全局变量"; 
      function test1() 
      { 
        var a = "局部变量"; 
         
        alert(a); 
      } 
       
      function test2() 
      { 
        alert(a); 
         
        var a = "局部变量"; 
         
        alert(a); 
      } 
       
      function test3() 
      { 
        alert(a); 
         
        a = "局部变量"; 
         
        alert(a); 
      } 
    </script> 
     
    <input type="button" value="test1" onclick="test1()"/> 
    <input type="button" value="test2" onclick="test2()"/> 
    <input type="button" value="test3" onclick="test3()"/> 
 
  </body> 
</html> 

运行的结果是这样的:
点击test1 ,弹出局部变量。
点击test2,弹出undefined,再弹出局部变量
 
点击test3,弹出全局变量,再弹出局部变量

这就是使用var和不使用的区别所在:
如果使用var,那么程序会强制定义一个新变量。
如果没有使用var,系统会优先在当前上下文中搜索是否存在该变量,只有在不存在的前提下才会重新定义一个新变量。

test3中,使用的变量a均为全局变量,第一次直接输出了全局变量,第二次是直接为全局变量赋值之后使用。
test1和test2中都存在在function中使用var定义同名新变量,会导致函数中的变量覆盖掉全局变量。所以在test2中:第一次输出的a是已经被覆盖了的局部变量a,但是没有给予初值,所以会出现undefined这个结果。这样使用变量实际上是错误的,大家应该避免。

相关文章

  • js实现兼容IE、Firefox的图片缩放代码

    js实现兼容IE、Firefox的图片缩放代码

    这篇文章主要介绍了js实现兼容IE、Firefox的图片缩放代码,涉及JavaScript操作图片元素的相关技巧,需要的朋友可以参考下
    2015-12-12
  • JS实现进度条动态加载特效

    JS实现进度条动态加载特效

    这篇文章主要为大家详细介绍了JS实现进度条动态加载特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现简单点赞操作

    js实现简单点赞操作

    这篇文章主要为大家详细介绍了js实现简单点赞操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JS求解三元一次方程组值的方法

    JS求解三元一次方程组值的方法

    这篇文章主要介绍了JS求解三元一次方程组值的方法,涉及JS数学运算的相关操作技巧,需要的朋友可以参考下
    2017-01-01
  • js实现jquery的offset()方法实例

    js实现jquery的offset()方法实例

    这篇文章主要介绍了js实现jquery的offset()方法,实例分析了jquery的offset()方法原理与采用javascript实现的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 动态改变div的z-index属性的简单实例

    动态改变div的z-index属性的简单实例

    这篇文章介绍了动态改变div的z-index属性的简单实例,有需要的朋友可以参考一下
    2013-08-08
  • 详解ES7 Decorator 入门解析

    详解ES7 Decorator 入门解析

    这篇文章主要介绍了详解ES7 Decorator 入门解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • layui原生表单验证的实例

    layui原生表单验证的实例

    今天小编就为大家分享一篇layui原生表单验证的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    我们在学习JavaScript中,难免都会去网上查一些资料。也许偶尔就会遇到“事件委托”,但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止。对于我这个比较好奇的人来说,实在很蛋疼。尤其是想更多的了解“事件委托”的时候。
    2015-06-06
  • 微信小程序实现聊天对话(文本、图片)功能

    微信小程序实现聊天对话(文本、图片)功能

    这篇文章主要为大家详细介绍了微信小程序实现聊天对话功能,可以发送文本、图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论