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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
javascript+xml技术实现分页浏览
Jul 27 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
destoon官方标签大全
2014/06/20 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js数组操作学习总结
2013/11/04 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
《毛主席在花山》教学反思
2014/04/20 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
交通事故协议书范本
2014/11/18 职场文书
家长会后的感想
2015/08/11 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL