您的位置是:网站首页>Javascript编程Javascript编程

js中什么是变量提升?为什么会有变量提升?

少儿编程网2021-09-26 15:39:06Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介JavaScript中什么是变量提升?本篇文章带大家了解一下js中的变量提升,介绍一下为什么会有变量提升。js变量提升JavaScript是单线程语言,所以执行肯定是按顺序执行。但是并不是逐行的分析和执行,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。在编译阶段阶段,代码真正执行前的几毫

JavaScript中什么是变量提升?本篇文章带大家了解一下js中的变量提升,介绍一下为什么会有变量提升。v66少儿编程网-https://www.pxcodes.com

v66少儿编程网-https://www.pxcodes.com

js变量提升

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

先从一个简单的例子来入手:v66少儿编程网-https://www.pxcodes.com

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

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

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

那么我们再看一个例子:v66少儿编程网-https://www.pxcodes.com

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

这段代码又会输出什么?输出2吗? 其实这段代码会输出undefined。这又是为什么呢?刚刚说过,JavaScript会将变量的声明提升到顶部,但是赋值语句是不会提升的,对于js来说,var a = 2是分为两步解析的:v66少儿编程网-https://www.pxcodes.com

var a;
a = 2;

而js只会提升 var a 这句,所以刚刚的语句等价于:v66少儿编程网-https://www.pxcodes.com

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

那么,为什么会有变量提升?

为什么会出现变量提升这个现象呢? 因为js与其他语言一样,都要经历编译跟执行阶段。而js在编译阶段的时候,会搜集所有的变量声明并且提前声明变量,而其他的语句都不会改变他们的顺序,因此,在编译阶段的时候,第一步就已经执行了,而第二部则是在执行阶段执行到该语句的时候才执行。v66少儿编程网-https://www.pxcodes.com

变量声明

js的变量声明应该大体上可以分三种:var声明、let与const声明和函数声明。 函数声明与其他声明一起出现的时候,就可能会引起一些冲突。我们接着往下看:v66少儿编程网-https://www.pxcodes.com

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

你觉得会输出什么?这么写会报错吗? 其实输出的结果是fn。这就解释了我们刚刚的问题,当函数声明与其他声明一起出现的时候,是以谁为准呢?答案就是,函数声明高于一切,毕竟函数是js的贵族阶级v66少儿编程网-https://www.pxcodes.com

那么多个函数声明怎么办呢?v66少儿编程网-https://www.pxcodes.com

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

以上代码输出结果为2。这是因为有多个函数声明的时候,是由**后的函数声明来替代前面的v66少儿编程网-https://www.pxcodes.com

还有**后一个例子了:v66少儿编程网-https://www.pxcodes.com

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

经过了上面的理解,再看这个是不是就很简单了呀?这个跟第二个例子是一样的,var fn = function() {}这种格式我们叫做函数表达式。 它其实也分为两部分:v66少儿编程网-https://www.pxcodes.com

var fn;
fn = function() {};

参考例2,我们可以知道,这个的结果应该是报错了(因为fn声明但未赋值,因此fn是undefined)。v66少儿编程网-https://www.pxcodes.com

总结

那么,来总结一下吧。v66少儿编程网-https://www.pxcodes.com

  • js会将变量的声明提升到js顶部执行,对于var a = 2这种语句,会拆分开,将var a这步进行提升。v66少儿编程网-https://www.pxcodes.com

  • 变量提升的本质其实是js引擎在编译的时候,就将所有的变量声明了,因此在执行的时候,所有的变量都已经完成声明。v66少儿编程网-https://www.pxcodes.com

  • 当有多个同名变量的时候,函数声明会覆盖其他的声明。如果有多个函数声明,则由**后一个函数声明覆盖之前的所有声明。v66少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程入门!!

以上就是js中什么是变量提升?为什么会有变量提升?的详细内容,更多请关注少儿编程网其它相关文章! v66少儿编程网-https://www.pxcodes.com

来源:php中文网v66少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

js中什么是变量提升?为什么会有变量提升?

      匿名评论
    • 评论
    人参与,条评论
    js中什么是变量提升?为什么会有变量提升?

少儿编程网标签云

微信公众号

免费视频教程

先知道