javascript中错误使用var造成undefined

所属分类: 网络编程 / JavaScript 阅读数: 652
收藏 0 赞 0 分享

在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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多