4.1 先有鸡还是先有蛋
JavaScript 代码在执行时并不完全是由上到下一行一行执行的
代码片段一
a = 2;
var a;
console.log( a );//2
另一段代码，代码片段二
console.log(a);//undefined
var a = 2;
4.2 编译器再度来袭
包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理
所以代码片段一的执行顺序实际是
var a;
a = 2;
console.log( a );
代码片段二的执行顺序实际是
var a;
console.log( a );
a = 2;
提升
这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。
- 只有声明本身会被提升，而赋值或其他运行逻辑会留在原地。
- 每个作用域都会进行提升操作
- 函数声明会被提升，但是函数表达式却不会被提升
- 即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用
比如下面代码
foo();
function foo() {
console.log( a ); // undefined
var a = 2;
}
实际执行顺序上是
function foo() {
var a;
console.log( a ); // undefined
a = 2;
}
foo();
代码示例, var foo 被提升，但是赋值没有提升，所以foo是undefined，所以foo()会爆出类型错误，因为还不是一个function类型。
foo(); // 不是 ReferenceError, 而是 TypeError!
var foo = function bar() {
// ...
};
代码示例,var foo 会被提升，和上面的例子一样，爆出类型错误。而bar实际上并没有提升
foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
// ...
};
实际执行代码为
var foo;
foo(); // TypeError
bar(); // ReferenceError 无法引用到局部变量
foo = function() {
var bar = ...self...
// ...
}
4.3 函数优先
函数声明和变量声明都会被提升。但是函数会首先被提升，然后才是变量。
foo(); // 1
var foo;
function foo() {
console.log( 1 );
}
foo = function() {
console.log( 2 );
};
实际代码为
function foo() {
console.log( 1 );
}
foo(); // 1
foo = function() {
console.log( 2 );
};
尽管重复的 var 声明会被忽略掉，但出现在后面的函数声明还是可以覆盖前面的
foo(); // 3
function foo() {
console.log( 1 );
}
var foo = function() {
console.log( 2 );
};
function foo() {
console.log( 3 );
}
一个普通块内部的函数声明通常会被提升到所在作用域的顶部
- 所以在if内部声明函数，始终是后面代码中的声明生效
foo(); // "b"
var a = true;
if (a) {
function foo() { console.log("a"); }
} else {
function foo() { console.log("b"); }
}
