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 target与currentTarget区别说明
Aug 28 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python解惑之True和False详解
2017/04/24 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python读取文件名并改名字的实例
2019/01/07 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
性能服装:HYLETE
2018/08/14 全球购物
学校交通安全责任书
2014/08/25 职场文书
铅球加油稿100字
2014/09/26 职场文书
黑白记忆观后感
2015/06/18 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
用Python生成会跳舞的美女
2022/01/18 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技