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操作页面表格,元素的一些技巧
Feb 02 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 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 危险函数解释 分析
2009/04/22 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python3 flask实现文件上传功能
2020/03/20 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python实现代码块儿折叠
2020/04/15 Python
Python 实现微信自动回复的方法
2020/09/11 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
法国春天百货官网:Printemps.com
2020/06/29 全球购物
相亲大会策划方案
2014/06/05 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
2014年信用社工作总结
2014/11/25 职场文书
Spring实现内置监听器
2021/07/09 Java/Android