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 相关文章推荐
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
javascript常见操作汇总
Sep 03 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
js实现的订阅发布者模式简单示例
Mar 14 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
搜索引擎技术核心揭密
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
Admin generator, filters and I18n
2011/10/06 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Python实现简单拆分PDF文件的方法
2015/07/30 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python super()函数的基本使用
2020/09/10 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
初中生三年学习生活的自我评价
2013/11/03 职场文书
竞职演讲稿范文
2014/01/11 职场文书
医药销售自我评价200字
2014/09/11 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
邀请函模板
2015/02/02 职场文书
请客吃饭开场白
2015/06/01 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python
MySQL 数据 data 基本操作
2022/05/04 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers