js中的变量提升是什么意思

这篇文章主要介绍“js中的变量提升是什么意思”，在日常操作中，相信很多人在js中的变量提升是什么意思问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”js中的变量提升是什么意思”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联服务项目包括七星网站建设、七星网站制作、七星网页制作以及七星网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，七星网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到七星省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

js变量提升

JavaScript是单线程语言，所以执行肯定是按顺序执行。但是并不是逐行的分析和执行，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。在编译阶段阶段，代码真正执行前的几毫秒，会检测到所有的变量和函数声明，所有这些函数和变量声明都被添加到名为Lexical Environment的JavaScript数据结构内的内存中。所以这些变量和函数能在它们真正被声明之前使用。

先从一个简单的例子来入手：

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

以上的代码会输出什么，假如这段代码是从上到下执行的话，肯定会输出undefined，然而JavaScript却不是自上而下执行的语言。 这段代码的输出结果是2，意外吗？那么，为什么会这样，这个关键点就在于--变量提升。他会将当前作用域的所有变量的声明，提升到程序的顶部，因此，上面的代码等价于以下代码，这样是不是就能明白一些了？

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

那么我们再看一个例子：

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

这段代码又会输出什么？输出2吗？ 其实这段代码会输出undefined。这又是为什么呢？刚刚说过，JavaScript会将变量的声明提升到顶部，但是赋值语句是不会提升的，对于js来说，var a = 2是分为两步解析的：

var a;
a = 2;

而js只会提升 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引擎在编译的时候，就将所有的变量声明了，因此在执行的时候，所有的变量都已经完成声明。

• 当有多个同名变量的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则由最后一个函数声明覆盖之前的所有声明。

到此，关于“js中的变量提升是什么意思”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！