|
JavsScript基础–声明提升
编译与执行
我们在看JS代码时，往往是从上到下，从前到后，那么代码在执行时也是按照这样的顺序吗？可以说基本是这样的，但不完全是这样。从我们开始运行代码时，其实经历了两个过程：
- 编译器编译：在这个阶段，经历了代码的词法分析、解析和生成三个步骤，这个过程基本上都是按照代码的顺序来进行的，不过在这个过程中，编译器会做一些特别的处理——将变量和函数的声明提前，也就是将声明这个步骤提到变量或函数所在作用域的最前面。请见下文的代码示例。
- 引擎执行：编译器编译完后，引擎就根据编译器生成的代码（不完全同于原始代码顺序）执行。
var 声明变量提前
我们先来看三个例子：
eg.1
1 2 3 | a = 2;
var a;
console.log( a );
|
1 2 | console.log( b );
var b = 2;
|
eg.3
复制上面的三个例子中，在浏览器中运行，大家觉得结果是什么？
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
|
