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+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
使用javascript获取页面名称
Dec 23 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
node.js express框架简介与实现
Jul 23 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 自定义错误处理函数的使用详解
2013/05/10 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
python re库的正则表达式入门学习教程
2019/03/08 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
红旗方阵解说词
2014/02/12 职场文书
公益广告语集锦
2014/03/13 职场文书
广告创意求职信
2014/03/17 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
银行委托书范本
2014/09/28 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
创业计划书之面包店
2019/09/12 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers