浅谈JavaScript的全局变量与局部变量

 更新时间:2016年06月10日 17:53:06   投稿:jingxian  
下面小编就为大家带来一篇浅谈JavaScript的全局变量与局部变量。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一、JavaScript scope 的划分标准是function函数块,不是以 if、while、for来划分的

<script>
function f1(){
   alert("before for scope:"+i);    
 //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行)
 //此时i值为undefined
   for(var i=0; i<3;i++){
       alert("in for scope:"+i);}
 //i的值是0,1,2  
   alert(“after for scope:”+1);
  //i的值是3,此时已经在for scope之外,但i的值仍然保留为3
    while(true){
       var j=1;
       break;}
    alert(j);
  //j的值是1,此时已经在while scope之外,但j的值仍然保留为1
    if(true){
      var k=1;
    }
    alert(k);
  //k的值为1,此时已经在if scope之外,但k的值仍保留为1
}
f1();
//此时在函数块外调用函数,再次输出存在于f1这个function scope里的i j k变量
alert(i);
//error!!!原因是这里的i未声明(不是未赋值,区别f1的第一行输出),脚本错误,程序结束!
alert(j);    
//未执行
alert(k);
//未执行
</script>

二、JavaScript在执行之前会对整个脚本文件进行预编译(对脚本文件的声明部分做分析,包括局部变量部分),从而确定实变量的作用域。举个例子在下边:

<script>
   var x=1;
   function f2(){
    alert(x);
   //x的值为undefined!这个x并不是全局变量,因为在function scope已经又声明了一个重名的局部变量,所以全局变量的参数a被覆盖了。
    说明了JavaScript在执行前会进行预编译,函数体内的x就被指向局部变量,而不是全局变量。此时x只有声明,没有赋值,所以为undefined
    x=3;
    alert(x);
   //x值为3.但还是局部变量
    var x;
   //局部变量x在这里声明
    alert(x);
   //值为3
   }
   f2();
   alert(x);
   //x值为1,并不是在function scope内,x的值为全局变量的值。
</script>

三、当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope,而当全局变量遇上局部变量时,

怎样使用全局变量呢?用window.globalVariableName。

<script>
   var a=1;
    function f3(){
       alert(window.a);
  //a位1,这里的a是全局变量
       var a=2;
        alert(a);
      }
    f3();
    alert(a);
</script>

以上这篇浅谈JavaScript的全局变量与局部变量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    由浅入深讲解Javascript继承机制与simple-inheritance源码分析

    Javascript语言对继承实现的并不好,需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧,对javascript继承相关知识感兴趣的朋友一起看看吧
    2015-12-12
  • JS运动改变单物体透明度的方法分析

    JS运动改变单物体透明度的方法分析

    这篇文章主要介绍了JS运动改变单物体透明度的方法,结合实例形式分析了页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • 详解JavaScript中ora库的使用教程

    详解JavaScript中ora库的使用教程

    使用 ora 这个 JavaScript 库可以在命令行应用程序中提供漂亮的加载状态提示,本文详细介绍如何使用该库,希望对大家有一定的帮助
    2024-02-02
  • 微信小程序实现横屏手写签名

    微信小程序实现横屏手写签名

    这篇文章主要为大家详细介绍了微信小程序实现横屏手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • bootstrap选项卡扩展功能详解

    bootstrap选项卡扩展功能详解

    这篇文章主要为大家详细介绍了bootstrap选项卡扩展功能,增加关闭,超出一行显示下拉,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript实现列表分页功能特效

    JavaScript实现列表分页功能特效

    最近在做一个小项目,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。
    2015-05-05
  • js实现无限层级树形数据结构(创新算法)

    js实现无限层级树形数据结构(创新算法)

    这篇文章主要介绍了js实现无限层级树形数据结构,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JavaScript中的Web worker多线程API研究

    JavaScript中的Web worker多线程API研究

    这篇文章主要介绍了JavaScript中的Web worker多线程API研究,Web worker是HTML5的API,允许网页在安全的情况下执行多线程代码,需要的朋友可以参考下
    2014-12-12
  • js显示时间 js显示最后修改时间

    js显示时间 js显示最后修改时间

    本文介绍js如何显示最后修改时间,在页面的文本框中显示文件上一次被修改的时间,通过这种方法可以查看网页的更新时间,有需要的朋友可以参考下
    2013-01-01
  • webpack-dev-server 的 host 配置 0.0.0.0的方法

    webpack-dev-server 的 host 配置 0.0.0.0的方法

    这篇文章主要介绍了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下
    2024-01-01

最新评论