搜索
写经验 领红包

js变量提升是什么意思(js变量提升面试题)

导语:js变量提升

对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解。所以在此,我想来讲一讲。

先从一个简单的例子来入门:

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

你觉得以上的代码会输出什么?是输出undefined吗?如果是按照程序的自上而下执行的话,那么这一段代码确实是输出undefined。然而,javascript并不是严格的自上而下执行的语言。

这一段代码的输出结果是2,是不是感到很意外?为什么会这样呢?这个问题的关键就在于变量提升(hoisting)。它会将当前作用域的所有变量的声明提升到程序的顶部,因此上面的代码其实等价于以下代码。这样是不是就很简单明了了。

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

那么接下来,我们再来看这个例子。

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

你觉得以上的代码会输出什么?是直接报ReferenceError吗?还是输出2呢?

其实以上代码会输出undefined。为什么呢?我们之前说过,js会将变量的声明提升到顶部,可是赋值语句并不会提升。对于js来说,其实var a = 2是分为两步的:

var a;a = 2;

而js只会将第一步提升到顶部,所以上面的语句等价于:

var a;​console.log(a);​a = 2;
为什么有变量提升

那么为什么会出现变量提升这个现象呢?

js和其他语言一样,都要经历编译和执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二步则是在执行阶段执行到该语句的时候才执行。

变量声明

js的变量声明其实大体上可以分为三种:var声明、let与const声明和函数声明。

函数声明与其他声明一起出现的时候,就可能会引起一些困扰。我们来看下面的例子。

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

你觉得上面会输出什么?TypeError吗?

上面的输出的结果是foo。这就引出了我们的问题了,当函数声明与其他声明一起出现的时候,是以谁为准呢?答案就是,函数声明高于一切,毕竟函数是js的第一公民。

那么,下面的例子呢?

foo();​function foo() { console.log('1');}​function foo() { console.log('2');}

当出现多个函数声明,那怎么办呢?以上代码输出结果为2。因为有多个函数声明的时候,是由最后面的函数声明来替代前面的。

想必经历了以上的例子,你应该已经对变量声明已经有一定的了解了。那么我再来出一道题目来测试下。

foo();​var foo = function() { console.log('foo');}

这道题目是不是非常简单啊?这道题和上面的第二道例子其实是一样的。var foo = function() {}这种格式我们叫做函数表达式。

它其实也是分为两部分,一部分是var foo, 而一部分是foo = function() {},参照例2,我们可以知道,这道题的结果应该是报了TypeError(因为foo声明但未赋值,因此foo是undefined)。

上面我们提到了var声明,函数声明,let和const呢?let和const其实也是有变量提升的概念,不过它们会比较特殊,因为它们会存在一个临时性死区的概念。我们可以通过一些例子来体现这一点。

a = 2;function test() { console.log(a); let a = 5;}test();

你觉得上面代码会输出什么呢?如果let没有变量提升的效果的话,那么应该是输出2。如果let拥有和var一样的变量提升效果的话,那么应该是输出undefined。

然而,上面的代码其实是会报错的。会报"ReferenceError:a is not defined"错误。那么为什么呢?

这其实就是我说的,let具有变量提升的效果,可是它又与var不一样,它具有一个临时性死区的概念。

这个临时性死区是说,我a已经声明了,可是在没有到它赋值的时候,你都不能用这个变量,不然就会报ReferenceError错误。所以从该代码块开始,一直到声明语句为止这整一块,都是let变量的临时性死区。而const和let具有意义的变量提升效果。

总结

那么接下来我们来总结一下。

js会将变量的声明提升到js顶部执行,因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分,并且将var a这一步提升到顶部执行。变量提升的本质其实是由于js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。当有多个同名变量声明的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则是由最后的一个函数声明覆盖之前所有的声明。let和const也具有变量提升效果,不过具有临时性死区。从代码块开始部分,一直到变量的声明语句这整一块,都不能使用该变量。

本文内容由快快网络小迪创作整理编辑!