JavsScript基础–声明提升

JavsScript基础–声明提升

编译与执行

我们在看JS代码时，往往是从上到下，从前到后，那么代码在执行时也是按照这样的顺序吗？可以说基本是这样的，但不完全是这样。从我们开始运行代码时，其实经历了两个过程：

• 编译器编译：在这个阶段，经历了代码的词法分析、解析和生成三个步骤，这个过程基本上都是按照代码的顺序来进行的，不过在这个过程中，编译器会做一些特别的处理——将变量和函数的声明提前，也就是将声明这个步骤提到变量或函数所在作用域的最前面。请见下文的代码示例。
• 引擎执行：编译器编译完后，引擎就根据编译器生成的代码（不完全同于原始代码顺序）执行。

var 声明变量提前

我们先来看三个例子： 
eg.1

    a = 2;
    var a;
    console.log( a );

　　

eg.2

    console.log( b );
    var b = 2;

eg.3

   console.log( c );

复制上面的三个例子中，在浏览器中运行，大家觉得结果是什么？

eg.1 –> 2; 
eg.2 –>undefined; 
eg.3 –> Uncaught ReferenceError: c is not defined(…)

可能有的同学看见这样的结果有点迷惑了，其实我们再想想代码运行经历的两个过程，就清楚了。

事实上，上面的三个例子经过编译器编译后，会生成这样的代码给引擎执行： 
eg.1 编译后代码

    var a;
    a = 2;
    console.log( a ); // a=2

eg.2 编译后代码

    var b;
    console.log( b ); // b=undefined
    b = 2;

eg.3 编译后代码

 console.log( c ); //找不到变量，报错

这下理解了吧，所以在一个作用域中，不管你在哪里声明变量，编译器都会将其提到所在作用域的最上面。

function声明函数提前

用function关键字声明函数其实和var声明变量差不多，编译器也会将其提到所在作用域的最上面，不过有一点区别的是function声明函数时，会将函数里的内容一并提前。也就是说，你只要在作用域里用function声明了函数，你在任何地方都是可以调用这个函数的。我们来看个例子： 
eg.4

    foo();
    function foo() {
        var a = 2;
        console.log( a );
    } // --> 2

但是如果你是用函数表达式来声明的，结果就不一样了。 
eg.5

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

　　

事实上，eg.5的例子和eg.2差不多，只不过eg.2中变量换成了函数而已。

“var” vs “function”

有同学可能会问了，如果代码中既有var，又有function，那么谁会在谁前面呢？事实上是function。 
eg.6

    foo(); // --> 1

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

    function foo() {
        console.log( 1 );
    }

eg.6最后输出来的是1，而不是2，事实上编译器编译后的代码是这样： 
eg.6编译后代码

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

    foo();

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

总结

到此，声明提前这个概念就结束了，啰啰嗦嗦了一大堆，希望对大家有所帮忙，欢迎踢馆:D