• JS变量重复声明以及忽略var 声明的问题及其背后的原理


    腾讯的一个笔试题,先看一下

    var a = 100;
    function fn() {
        alert(a);   //undefined
        var a = 200;
        alert(a);   //200
    }
    fn();
    alert(a);   //100
    var a;
    alert(a);    //100
    var a = 300;
    alert(a);   //300

    前两个很简单,不解释 了,涉及到声明提前的问题。

    后面仨为啥呢,这要总结下重复声明的问题: 
    1.使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误.

    2.如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色.

    3.如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响.

    JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数、在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当我们忽略var使用 a=2来声明变量时a为全局变量的问题:

    1.  
      //第一段代码
    2.  
      var a = 2;
    3.  
      var a = 3;
    4.  
      alert(a);//3
    5.  
      //第二段代码
    6.  
      <span style="font-size:18px;"></span><pre name="code" class="javascript">a = 2;
    7.  
      alert(a);//2
    
    

        这两段代码在JS的眼中是完全可行的,JS会默默忽略掉第二个var声明来将程序继续执行下去,而且后面声明的值会覆盖掉前面声明的值,而第二段代码JS会将忽略var的声明默认声明为全局变量。这些大家都应该很清楚,但是JS遇到重复声明时背后到底是怎样运行的呢?那就关系到了JS的幕后黑手:引擎以及他的左膀右臂:编译器以及作用域。

        在JS代码运行过程中:

            引擎负责整个代码的编译以及运行,编译器则负责词法分析、语法分析、代码生成等工作而作用域则如我们熟知的一样,负责维护所有的标识符(变量)。

            当我们执行上面的代码时,我们可以简单的理解为新变量分配一块儿内存,命名为a,并赋值为2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:

            1.首先编译器对代码进行分析拆解,从左至右遇见var a,则编译器会询问作用域是否已经存在叫a的变量了,如果不存在,则招呼作用域声明一个新的变量a,若已经存在,则忽略var 继续向下编译,这时a = 2被编译成可执行的代码供引擎使用。

            2.引擎遇见a=2时同样会询问在当前的作用域下是否有变量a,若存在,则将a赋值为2(由于第一步编译器忽略了重复声明的var,且作用域中已经有a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量a则将其赋值2,若没有找到,则招呼作用域声明一个变量a并赋值为2(这就是为什么第二段代码可以正确执行且a变量为全局变量的原因,当然,在严格模式下JS会直接抛出异常:a is not defined)。

           虽然JS很勤劳,可以帮我们解决一些小问题,但是作为程序员的我们最好按照代码规范来进行书写,于人于己都大有裨益,何乐而不为呢。

           注:关于a = 2 a会被声明为全局变量其中涉及到LHS查询方式,如需了解请移步至本人另一篇文章:JS引擎之LHS RHS

  • 相关阅读:
    小程序开发点滴积累
    使用openssl在windows 10下本地xampp配置https开发环境
    linux networking
    CGI,FastCGI,PHP-FPM,PHP-CLI,modPHP
    centos 7.2 64位 docker安装lamp环境
    反模拟类游戏外挂 转
    鼠标 hook 源码 C#版
    C# 鼠标连击源码 转
    win32 API 在win10 64位失效
    利用浏览器外部协议(URL Procotol)打开本地exe文件
  • 原文地址:https://www.cnblogs.com/yzhihao/p/9395280.html
Copyright © 2020-2023  润新知