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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
javascript json 新手入门文档
Dec 03 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
jquery检测上传文件大小示例
Apr 26 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 curl选项列表(超详细)
2013/07/01 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
img的onload的另类用法
2008/01/10 Javascript
Document 对象的常用方法
2009/07/31 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
react的hooks的用法详解
2020/10/12 Javascript
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python中hashlib模块用法示例
2017/10/30 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
一年级家长会邀请函
2014/01/25 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
初中优秀学生评语
2014/12/29 职场文书
小学美术教学反思
2016/02/17 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python