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 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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
php db类库进行数据库操作
2009/03/19 PHP
php绘制一个扇形的方法
2015/01/24 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
Python unittest框架操作实例解析
2020/04/13 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
汇智创新科技发展有限公司
2015/12/06 面试题
外企测试工程师面试题
2015/02/01 面试题
EJB的角色和三个对象
2015/12/31 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
2014新年寄语
2014/01/20 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
银行求职信模板
2015/03/20 职场文书
教师岗位说明书
2015/09/30 职场文书
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle