JavsScript基础–声明提升

编译与执行

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

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

var 声明变量提前

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

1 2 3

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

　　

eg.2

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

eg.3

1	console.log( c );

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

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

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

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

1 2 3

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

eg.2 编译后代码

1 2 3

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

eg.3 编译后代码

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

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

function声明函数提前

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

1 2 3 4 5

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

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

1 2 3 4 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

1 2 3 4 5 6 7 8 9

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

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

1 2 3 4 5 6 7 8 9 10

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

总结

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