zoukankan      html  css  js  c++  java
  • js变量提升与函数提升的过程详解

    js的变量提升与函数提升

    先来看两个栗子????,下面的两段代码分别输出什么?

    // 代码段1
    function foo() {
      var a = 1;
      function a() {}
      console.log(a);
    }
    foo();
    
    // 代码段2
    function foo() {
      var a;
      function a() {}
      console.log(a);
    }
    foo();
    

    答案是:代码段1打印的是1,代码段2打印的是 a() 函数。

    为什么会这样呢?这就涉及到js中的变量提升和函数提升的具体过程了。

    1、变量的提升

    js是怎么创建变量的呢?

    如下面的代码:

    var a = 1;
    var b = 2;
    

    js在解析上面的代码的时候,其实会按照下面的方式进行解析的:

    var a;
    var b;
    a = 1;
    b = 2;
    

    所以 js 并不是在我们定义一个变量的时候,声明完成之后立即赋值,而是把所有用到的变量全部声明之后,再到变量的定义的地方进行赋值,变量的声明的过程就是变量的提升。

    所以我们看下下面的栗子????:

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

    上面的代码在js的眼中是这样解析的:

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

    所以输出的 a 的值为1, b的值为 undefined。

    变量在声明提升的时候,是全部提升到作用域的最前面,一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了,而是赋值的位置在变量原本定义的位置。原本js定义变量的地方,在js运行到这里的时候,才会进行赋值操作,而没有运行到的变量,不会进行赋值操作。

    所以变量的提升,提升的其实是变量的声明,而不是变量的赋值。

    2、函数的提升

    函数的提升和变量的提升类似,都是提升到作用域的最开始的位置,只不过变量的提升是分两步的,第一步是变量声明的提升,第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置,相当于剪切过去的样子。

    3、变量提升和函数提升的顺序

    在作用域中,不管是变量还是函数,都会提升到作用域最开始的位置,不同的是,函数的提升后的位置是在变量提升后的位置之后的。

    举个栗子????:

    下面的代码输出什么?

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

    上面的代码在js眼中是这样解析的:

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

    所以从上面的栗子可以看到,变量的提升是在函数提升之前的,但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的,而函数提升是相当于直接剪切到最前面的。

    我们再看一个更加复杂一点的栗子????:

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

    js是这样解析的:

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

    最后,注意:只有声明的变量和函数才会进行提升,隐式全局变量不会提升。

    下面的栗子中,b不会进行变量提升。

    function foo() {
      console.log(a);
      console.log(b); // 报错
      b = 'aaa';
      var a = 'bbb';
      console.log(a);
      console.log(b);
    }
    foo();
    

    4、参考链接

    js变量提升与函数提升的机制:https://segmentfault.com/a/1190000008568071

    好文!必须点赞

  • 相关阅读:
    11111 Generalized Matrioshkas
    Uva 442 Matrix Chain Multiplication
    Uva 10815 Andy's First Dictionary
    Uva 537 Artificial Intelligence?
    Uva 340 MasterMind Hints
    SCAU 9508 诸葛给我牌(水泥题)
    Uva 10420 List of Conquests(排序水题)
    Uva 409 Excuses, Excuses!
    10/26
    11/2
  • 原文地址:https://www.cnblogs.com/lvonve/p/14180278.html
Copyright © 2011-2022 走看看