javascript中错误使用var造成undefined


Posted in Javascript onMarch 31, 2016

在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这个结果。这样使用变量实际上是错误的,大家应该避免。

Javascript 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
Javascript倒计时代码
Aug 12 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
JS实现的自定义map方法示例
May 17 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 #Javascript
js表单验证实例讲解
Mar 31 #Javascript
javascript创建cookie、读取cookie
Mar 31 #Javascript
基于javascript实现全屏漂浮广告
Mar 31 #Javascript
JS深度拷贝Object Array实例分析
Mar 31 #Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 #Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 #Javascript
You might like
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
PHP getName()函数讲解
2019/02/03 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
限制复选框的最大可选数
2006/07/01 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
浅谈Python的文件类型
2016/05/30 Python
Python实现TCP通信的示例代码
2019/09/09 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
主管职责范文
2013/11/09 职场文书
物流创业计划书
2014/02/01 职场文书
大课间活动实施方案
2014/03/06 职场文书
会计岗位说明书
2014/07/29 职场文书
万能检讨书2000字
2014/10/17 职场文书
PHP命令行与定时任务
2021/04/01 PHP
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
JavaScript实现简单图片切换
2021/04/29 Javascript