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数组处理方法汇总
Jun 20 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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
多重?l件?合查?(一)
2006/10/09 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python中requests模块的使用方法
2015/04/08 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python实现图书借阅系统
2019/02/20 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
个人党性分析总结
2015/03/05 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis