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 相关文章推荐
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
node.js中watch机制详解
Nov 17 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
一个可复用的vue分页组件
May 15 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
详解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+javascript液晶时钟
2006/10/09 PHP
php中实现简单的ACL 完结篇
2011/09/07 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
php获取excel文件数据
2017/04/21 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python实现二分查找算法
2017/09/21 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
高中美术教学反思
2014/01/19 职场文书
铁路个人事迹材料
2014/01/30 职场文书
公司股东合作协议书
2014/09/14 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
社区端午节活动总结
2015/02/11 职场文书
2016年少先队活动总结
2016/04/06 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android