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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Python 导入文件过程图解
2019/10/15 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python数据分析:关键字提取方式
2020/02/24 Python
Python wordcloud库安装方法总结
2020/12/31 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
过滤器的用法
2013/10/08 面试题
岗位职责的含义
2013/11/17 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
关于母亲节的感言
2014/02/04 职场文书
银行竞聘报告范文
2014/11/06 职场文书
自主招生自荐信格式
2015/03/04 职场文书
党支部评议意见
2015/06/02 职场文书