javascript中错误使用var造成undefined

 更新时间:2016年03月31日 16:02:04   作者:MingChaoSun  
这篇文章主要介绍了javascript中错误使用var造成undefined的原因,实例分析了错误使用var造成undefined的过程,感兴趣的小伙伴们可以参考一下

在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这个结果。这样使用变量实际上是错误的,大家应该避免。

相关文章

  • js实现从中间开始往上下展开网页窗口的方法

    js实现从中间开始往上下展开网页窗口的方法

    这篇文章主要介绍了js实现从中间开始往上下展开网页窗口的方法,是非常实用的js窗口效果,需要的朋友可以参考下
    2015-03-03
  • 前端URL拼接路径参数具体实现代码

    前端URL拼接路径参数具体实现代码

    这篇文章主要给大家介绍了关于前端URL拼接路径参数具体实现的相关资料,url地址拼接是经常会遇到的问题,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • JavaScript解析及序列化JSON的方法实例分析

    JavaScript解析及序列化JSON的方法实例分析

    这篇文章主要介绍了JavaScript解析及序列化JSON的方法,结合实例形式分析javascript针对json格式数据的解析、序列化等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • JS实现的3D拖拽翻页效果代码

    JS实现的3D拖拽翻页效果代码

    这篇文章主要介绍了JS实现的3D拖拽翻页效果,通过鼠标事件结合时间函数动态操作页面元素实现拖拽翻页的效果,需要的朋友可以参考下
    2015-10-10
  • JavaScript async/await使用详解

    JavaScript async/await使用详解

    任意一个名称都是有意义的,先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成
    2022-12-12
  • JavaScript使用二分查找算法在数组中查找数据的方法

    JavaScript使用二分查找算法在数组中查找数据的方法

    这篇文章主要介绍了JavaScript使用二分查找算法在数组中查找数据的方法,较为详细的分析了二分查找法的原理与javascript实现技巧,需要的朋友可以参考下
    2015-04-04
  • javascript模拟地球旋转效果代码实例

    javascript模拟地球旋转效果代码实例

    javascript模拟地球旋转效果,把一下代码保存到HTML文件,打开就可以看到一个旋转的地球。请使用Chrome、Opera或者火狐浏览器查看,IE8不支持
    2013-12-12
  • el-table动态渲染列、可编辑单元格、虚拟无缝滚动的实现

    el-table动态渲染列、可编辑单元格、虚拟无缝滚动的实现

    vue对数据处理很常见,本文主要介绍了对el-table组件二次封装,包括对el-table的动态渲染、单元格编辑;对于无缝滚动的实现,优化大数据量下的页面卡顿问题,感兴趣的可以了解一下
    2023-12-12
  • JavaScript函数及其prototype详解

    JavaScript函数及其prototype详解

    这篇文章主要介绍了JavaScript函数及其prototype详解的相关资料,需要的朋友可以参考下
    2023-03-03
  • 利用Node.js创建一个密码生成器的全步骤

    利用Node.js创建一个密码生成器的全步骤

    这篇文章主要给大家介绍了关于如何利用Node.js创建一个密码生成器的相关资料,文章将实现的步骤一步步介绍的非常详细,对大家具有也一定的参考学习价值,需要的朋友可以参考下
    2021-07-07

最新评论