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 相关文章推荐
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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的ASCII码转换类
2013/07/05 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
js实现漫天星星效果
2017/01/19 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python range实例用法分享
2020/02/06 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
超市国庆节促销方案
2014/02/20 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
营业员岗位职责
2015/02/11 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python