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不是基础的基础
Dec 24 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 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
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
利用python编写一个图片主色转换的脚本
2017/12/07 Python
图解Python变量与赋值
2018/04/03 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
详解用python写一个抽奖程序
2019/05/10 Python
python os模块简单应用示例
2019/05/23 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
教师学习中国梦心得体会
2016/01/05 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书