Javascript:谈谈JS的全局变量跟局部变量

2023-11-11

        今天公司一个实习小妹子问我两段JS代码的区别:

<script type="text/javascript">
 var a = "Hello";
 function test(){
      var a;
      alert(a);
      a = "World";
      alert(a);
 }
</script>


<script type="text/javascript">
 var a = "Hello";
 function test(){
      alert(a);
      a = "World";
      alert(a);
 }
</script>

        我想,好简单呀,不就是全局变量跟局部变量的scope问题吗?我说:"当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope。所以两段代码运行的结果分别为:1) undefined World 2) Hello World。然后我随意编了如下一个例子给她:
 <script>
    var a =1;
    function test(){
       alert(a);
       var a = 2;
       alert(a);
    }
    test();
    alert(a);
 </script>
        大家猜结果等于多少?是输出1 2 1 吗?嗯嗯,当我把测试case发给她之前也是这么认为的,但测试输出后……运行结果是 undefined 2 1。当时百思不得其解,问了谷老师才知道,我对JS还不是非常了解,所以痛下苦功,学习+测试,总结如下:

        一、Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分)。切记,是function块,而for、while、if块并不是作用域的划分标准,可以看看以下几个例子:

<script>
function test2(){
    alert ("before for scope:"+i);    // i未赋值(并不是未声明!使用未声明的变量或函数全抛出致命错误而中断脚本执行)

                                                    // 此时i的值是underfined
    for(var i=0;i<3;i++){
        alert("in for scope:"+i);  // i的值是 0、1、2, 当i为3时跳出循环
    }
    alert("after for scope:"+i);  // 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
}

test2();
//若在此时(function scope之外)再输出只存在于test2 这个function scope里的 i、j、k变量会发生神马效果呢?
alert(i); //error! 没错,是error,原因是变量i未声明(并不是未赋值,区分test2函数的第一行输出),导致脚本错误,程序到此结束!
alert("这行打印还会输出吗?"); //未执行
alert(j); //未执行
alert(k); //未执行
</script>
        二、Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量),从而确定实变量的作用域。怎么理解呢?看下面一个例子:
<script>
    var a =1;
    function test(){
        alert(a); //a为undefined! 这个a并不是全局变量,这是因为在function scope里已经声明了(函数体倒数第4行)一个重名的局部变量,
                     //所以全局变量a被覆盖了,这说明了Javascript在执行前会对整个脚本文件的定义部分做完整分析,所以在函数test()执行前,
                     //函数体中的变量a就被指向内部的局部变量.而不是指向外部的全局变量. 但这时a只有声明,还没赋值,所以输出undefined。
        a=4       
        alert(a);  //a为4,没悬念了吧? 这里的a还是局部变量哦!
        var a;     //局部变量a在这行声明
        alert(a);  //a还是为4,这是因为之前已把4赋给a了
    }
    test();
    alert(a); //a为1,这里并不在function scope内,a的值为全局变量的值
</script>
        三,当全局变量跟局部变量重名时,局部变量的scope会覆盖掉全局变量的scope,当离开局部变量的scope后,又重回到全局变量的scope,而当全局变量遇上局部变量时,怎样使用全局变量呢?用window.globalVariableName。
<script>
    var a =1;
    function test(){   
        alert(window.a);  //a为1,这里的a是全局变量哦!
        var a=2;     //局部变量a在这行定义
        alert(a);  //a为2,这里的a是局部变量哦!
    }
    test();
    alert(a); //a为1,这里并不在function scope内,a的值为全局变量的值
</script>

        (转自: http://apps.hi.baidu.com/share/detail/50528730
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript:谈谈JS的全局变量跟局部变量 的相关文章

随机推荐

  • 敏捷开发---故事拆解

    很多时候 故事拆解利用模块化处理方式执行 但是跟多事小团队内部协商进行ac处理 体验问题的处理 这种弊端是 缺乏故事完整性 建议 采用全面鱼骨特性 进行小团队作战
  • 理解Python中的with…as…语法

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 更详细的参考 http www ibm com developerworks cn opensource os cn pythonwith http blog csdn n
  • padStart()与padEnd()

    padStart padStart 方法 用另一个字符串填充当前字符串 如果需要的话 会重复多次 以便产生的字符串达到给定的长度 从当前字符串的左侧开始填充 语法 str padStart targetLength padString 参数
  • JTS:02 使用WKB操作数据

    版本 org locationtech jts jts core 1 19 0 链接 github 代码 import org locationtech jts geom Coordinate import org locationtech
  • 高德地图通过图层layer实现对海量点的可视化渲染

    一 可视化海量点应用场景 在正文开始之前我先说说我为啥会使用这个技术来实现数据的可视化 事情是这样的 我接手了一个项目 里面有个需求是在地图上标记出他们公司的产品的使用分布 我接手的时候呢 我前面的那位大哥是使用marker点覆盖物 加上f
  • Navigation Preview unavailable in Android Studio 3.4 Preview

    Navigation Preview unavailable in Android Studio 3 4 Preview 最近在学Jetpack Navigation组件 但是在写navigation资源文件的时候 Preview 显示不出
  • 周更计划----web安全学习

    本周做题 ctfshow web入门 信息搜集1 18 目录 web1 web2 web3 web4 web5 web6 web7 web8 web9 web10 web11 web12 web13 web14 web15 web16 we
  • mysql多表查询

    多表关系分类 一对一 任意一方添加外键 关联另外一方的主键 并且设置外键唯一unique 一对多 多对一 在多的一方建立外键 指向一的一方的主键 多对多 将两张表的主键提取出来建立一张中间表 直接查询 会产生无效的笛卡尔积 select f
  • physx选择显卡还是cpu_玩转显卡,再也不用担心被坑

    对于显卡 相信大家都不陌生 无论是玩游戏 还是从事专业的图形设计 有一块好显卡才能如有神助 所以 今天小编就来带大家认识一下显卡本卡 01 什么是显卡 从字面上理解显卡是显示接口卡 显卡英文全称Video card或Graphic card
  • 解决Maven打包报错Could not transfer artifact xxx.xxx找不到依赖的问题

    解决Maven打包报错Could not transfer artifact xxx xxx找不到依赖的问题 概述 方案一 方案二 方案三 作者使用的这种方案 命令事例 概述 当我用idea导入一个新的maven项目 配置好maven仓库
  • 浏览器控制台报错net::ERR_CONNECTION_RESET原因:

    浏览器控制台报错net ERR CONNECTION RESET原因 浏览器控制台报错net ERR CONNECTION RESET原因 浏览器控制台错误 101 net ERR CONNECTION RESET 的本身含义就是这个网站存
  • Web前端开发技术课程大作业,期末考试

    Web前端开发技术课程大作业 期末考试 作业要求 最终界面 部分代码呈现 index html login html index css login css swithpic js 完整代码素材下载 作业要求 网站前端程序不仅要能够把用户要
  • linux下使用sed命令将文件的LF转为CRLF

    linux下使用sed命令将文件的CRLF转为LF 只要将每行中 r变成空就OK 以下命令为将file中的CRLF转为LF sed i s r g file 以下命令为将目录中 c文件和 h文件中的CRLF转为LF find regex c
  • 牛客SQL34: 牛客直播各科目同时在线人数(最大值问题)

    牛客SQL34 牛客直播各科目同时在线人数 最大值问题 内容目录 牛客SQL34 牛客直播各科目同时在线人数 最大值问题 一 描述 二 思路解析 三 代码 四 问题思考 一 描述 牛客某页面推出了数据分析系列直播课程介绍 用户可以选择报名任
  • 考研OS备考

    本文主要是考研复试备考自用 所以课后习题答案主要是简答题部分 此外还有其他的简答补充 如果发现有误 欢迎在评论区或者私信指出 计算机操作系统 汤小丹慕课版 课后习题答案 考研备考 第1章 操作系统引论 第1章 课后习题答案 第1章 零碎知识
  • 性能计数器

    性能计数器 Performance Object Counter Description Processor processor Time 指处理器执行非闲置线程时间的百分比 测量处理器繁忙的时间 这个计数器设计成用来作为处理器活动的主要指
  • 成都亚恒丰创科技USB-CAN和CAN分析仪接口方式

    USB CAN和CAN分析仪接口方式 导语 随着现代汽车电子技术的飞速发展 CAN总线成为了汽车领域中最常用的通信协议 而在进行CAN总线的调试和分析时 CAN分析仪是一种必不可少的工具 本文将介绍USB CAN接口和CAN分析仪的基本原理
  • Spring参数校验--List<E>类型参数校验

    1 遇到的问题 今天开发接口 遇到请求参数固定为List
  • 2023年第三届能源、电力与电气工程国际会议 (CoEEPE 2023)

    会议简介 Brief Introduction 2023年第三届能源 电力与电气工程国际会议 CoEEPE 2023 会议时间 2023年11月22日 24日 召开地点 澳大利亚 墨尔本 大会官网 www coeepe org 2023年第
  • Javascript:谈谈JS的全局变量跟局部变量

    今天公司一个实习小妹子问我两段JS代码的区别 我想 好简单