问题
有些朋友可能会觉得javascript的代码是从上到下,一行一行的解释执行的。如果按照这样的思路,在有些情况下阅读代码会得到错误的结果,考虑以下代码:
a = 2;
var a;
console.log(a);
console.log(a)
应该输出什么呢?有些开发者觉得会输出undefined
,因为var a
在'a = 2'之后,变量a
被重复定义了,但是没有被赋值,所以是'undefined'。但是结果输出是2
。如下图所示:
我们再来考虑另一段代码,如下所示:
console.log(a);
var a = 2;
这段代码会输出什么样的结果呢?有些人可能会觉得输出ReferenceError
。因为变量a
在没有声明的情况下就被使用了。真实结果呢,如下图所示:输出的是undefined
为什么会这样呢?这就牵出了本文的主题:JavaScript声明提升
JavaScript代码的运行规则
在JavaScript代码运行之前其实是有一个编译阶段的。编译之后才是从上到下,一行一行解释执行。变量提升
就发生在编译阶段,它把变量和函数的声明提升至作用域的顶端。(编译阶段的工作之一就是将变量与其作用域进行关联)。
所以对于代码var a =2;
来说,编译器看到的是两行代码var a; a = 2;
第一个语句是声明语句,在编译阶段处理。第二个语句是赋值语句,在运行阶段处理。
那么我们再回过头来看看问题中出现的代码:
a = 2;
var a;
console.log(a);
应该这样来处理:
var a; //编译阶段
a = 2; //运行阶段
console.log(a); //运行阶段
所以这段代码的最终输出的结果是2
。
第二段代码:
console.log(a);
var a = 2;
应该这样来处理:
var a; //编译阶段
console.log(a); //运行阶段
a = 2; //运行阶段
所以这段代码的最终输出结果是undefined
。
变量提升
需要注意两点:
提升的部分只是变量声明,赋值语句和可执行的代码逻辑还保持在原地不动
提升只是将变量声明提升到变量所在的变量范围的顶端,并不是提升到全局范围,说明如下:
foo();
function foo(){
console.log(a); //会输出undefined
var a = "2";
}
//变量提升之后的效果
function foo(){
var a;
console.log(a);
a = "2";
}
foo();
函数声明会提升,但是函数表达式就不了
。看如下代码:
foo();
var foo = function bar(){ //这是一个函数表达式,不再是函数声明。
console.log("bar");
}
处理方式如下:
var foo;
foo(); //TypeError,因为还没有赋值
bar(); //bar不可以在全局范围内引用
foo = function bar(){
console.log("bar");
}
函数是一等公民
变量声明和函数声明都会得到变量提升,但函数声明会最先得到提升,然后是变量声明。
考虑如下代码:
foo(); //输出的结果为1
var foo;
function foo(){
console.log(1);
}
foo = function(){
console.log(2);
}
处理方式如下:
function foo(){
console.log(1);
}
foo();
foo = function(){
console.log(2);
}
注意:var foo;
由于是重复声明变量,所以被编译优化去掉。
最后再来说明几种情况
对于函数声明来说,如果定义了相同的函数变量声明,后定义的声明会覆盖掉先前的声明,看如下代码:
foo(); //输出3
function foo(){
console.log(1);
}
var foo = function(){
console.log(2);
}
function foo(){
console.log(3);
}
JavaScript中是没有块级作用域的概念(ps:ES6中有改进了),看如下代码:
foo(); //输出结果为2
var a = true;
if(a){
function foo(){
console.log(1);
}
}else{
function foo(){
console.log(2);
}
}
这段代码输出结果为2,if语句没有块级作用域的功能,所以函数声明都被提升到全局作用域中,又因为定义了两个foo,后来的定义覆盖了前边的定义,所以输出结果为2。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。