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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
详解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执行速度全攻略(上)
2006/10/09 PHP
PHP的开合式多级菜单程序
2006/10/09 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
DOM事件探秘篇
2017/02/15 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python实现批量修改文件名代码
2017/09/10 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
django反向解析和正向解析的方式
2018/06/05 Python
python实现串口通信的示例代码
2020/02/10 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
医学生就业推荐表自我鉴定
2014/03/26 职场文书
给市场的环保建议书
2014/05/14 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
入队仪式主持词
2015/07/04 职场文书
详解Laravel制作API接口
2021/05/31 PHP
关于EntityWrapper的in用法
2022/03/22 Java/Android