JavaScript是单线程语言,所以执行肯定是按顺序执行。但是并不是逐行的分析和执行,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。在编译阶段阶段,代码真正执行前的几毫秒,会检测到所有的变量和函数声明,所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用
先看看这个简单的案例
a = 1;
var a;
console.log(a)
如果按照从上到下的顺序,打印出来的应该是"undefined",但由于有变量提升的情况,这里输出的结果是 1 .它会把当前作用域的变量声明提升到顶部,等价于以下的代码块,这么看就很明显了
var a;
a = 1;
console.log(a)
再看一个案例
console.log(a);
var a = 2;
在这个代码里,赋值是分两步进行的,因此var a = 2等价于 var a ; a = 2; 实际上提升的变量声明只有 var a; 上面的代价就等价于:
var a;
console.log(a);
a = 2;
变量提升的原因
为什么会出现变量提升这个现象呢?
因为js与其他语言一样,都要经历编译跟执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二部则是在执行阶段执行到该语句的时候才执行。
变量声明
js的变量声明应该大体上可以分三种:var声明、let与const声明和函数声明。
函数声明与其他声明一起出现的时候,就可能会引起一些冲突。我们接着往下看:
fn();
function fn () {
console.log('fn');
}
var fn = 2;
你觉得会输出什么?这么写会报错吗?
其实输出的结果是fn。这就解释了我们刚刚的问题,当函数声明与其他声明一起出现的时候,是以谁为准呢?答案就是,函数声明高于一切,毕竟函数是js的贵族阶级。
那么多个函数声明怎么办呢?
fn();
function fn () {
console.log('1');
}
function fn () {
console.log('2');
}
以上代码输出结果为2。这是因为有多个函数声明的时候,是由最后的函数声明来替代前面的。
还有最后一个例子了:
fn();
var fn = function () {
console.log('fn');
经过了上面的理解,再看这个是不是就很简单了呀?这个跟第二个例子是一样的,var fn = function() {}这种格式我们叫做函数表达式。
它其实也分为两部分:
var fn;
fn = function() {};
参考例2,我们可以知道,这个的结果应该是报错了(因为fn声明但未赋值,因此fn是undefined)。
总结
那么,来总结一下吧。
- js会将变量的声明提升到js顶部执行,对于var a = 2这种语句,会拆分开,将var a这步进行提升。
- 变量提升的本质其实是js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。
- 当有多个同名变量的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则由最后一个函数声明覆盖之前的所有声明。