美文网首页
变量声明提升和隐式变量声明

变量声明提升和隐式变量声明

作者: 零穆 | 来源:发表于2020-07-14 15:07 被阅读0次

    变量声明提升原理

      引擎会在解释 JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来,这也正是词法作用域的核心内容。因此包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理,这也正是变量声明提升。
      如var a = 1,可能会认为这是一个声明。但JavaScript实际上会将其看成两个声 明:var a;a = 2;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

    function foo(){
      a = 2;
      var a; 
      console.log( a );//2
    }
    function foo1(){
      console.log( a );//undefined
      var a = 2;
    }
    foo1()
    foo()
    

      他们等价于=>

    function foo(){
      var a; 
      a = 2;
      console.log( a );//2
    }
    function foo1(){
      var a
      console.log( a );//undefined
      a  = 2;
    }
    foo1()
    foo()
    

    函数优先

      函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个“重复”声明的代码中)是函数会首先被提升,然后才是变量。

    foo(); // 1 
    var foo; 
    function foo() { 
      console.log( 1 );
    }
    foo = function() { 
      console.log( 2 ); 
    }; 
    

    会输出1而不是2!这个代码片段会被引擎理解为如下形式:

    function foo() { 
      console.log( 1 ); 
    }
    foo(); // 1 
    foo = function() { 
      console.log( 2 ); 
    };
    

    其中阔以看到函数声明会提升,函数表达式不会。

    值得注意的事

      var变量声明和函数声明会提升,但是在es6语法中。let和const不会被提升。

    console.log(c) //ReferenceError: Cannot access 'c' before initialization
    let c = 3;
    

    隐式函数声明

    function foo (){
      a = "1"
      console.log(a)
    }
    foo() //1
    console.log(a) //1
    

      在你看到上面阔以被运行成功,并打印出1时。你会觉得非常不可思议。这是因为在非严格模式的情况下,编译器检测到 a 没有被声明,它会在在全局隐式声明一个 a。这就是上面代码执行成功的原因。等同于

    var a
    function foo (){
      a = "1"
      console.log(a)
    }
    foo() //1
    console.log(a) //1
    

    这种情况会导致全局变量污染,因此在命名一个变量的时候请务必声明它。

    相关文章

      网友评论

          本文标题:变量声明提升和隐式变量声明

          本文链接:https://www.haomeiwen.com/subject/vcjxhktx.html