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 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
Node.js文件操作详解
Aug 16 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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判断网络文件是否存在的方法
2015/03/12 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
iView框架问题整理小结
2018/10/16 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python结合API实现即时天气信息
2016/01/19 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python中求对数方法总结
2020/03/10 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
大型车展策划方案
2014/02/01 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
文明之星事迹材料
2014/05/09 职场文书
园林技术专业求职信
2014/07/28 职场文书
狮子林导游词
2015/02/03 职场文书
贷款工作证明模板
2015/06/12 职场文书
政审证明材料
2015/06/19 职场文书
孙振耀退休感言
2015/08/01 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
深入理解go缓存库freecache的使用
2022/02/15 Golang
MySQL Server 层四个日志
2022/03/31 MySQL