JavaScript之变量提升

news/2024/5/19 16:05:08

###场景###
开始读es6的时候,一开始介绍的是let和const指令,文章中就提到一个概念 => 变量提升。原文是这样说的:let不像var那样会发生“变量提升”现象。对我这个菜鸟来说,what?什么是变量提升。经过一番度娘以后,有了个大概的概念和自己的理解。 ###理解### 比较官方一点的解释这样的:JavaScript在工作时会先获取所有变量,然后再一行一行地执行代码。这就导致了所有变量声明的语句都会被提升到代码的最前面。这就是变量提升。 ###栗子###

    var a = 5;
    function fn(){
        a = 3;
        console.log(a)
        var a;
    }
    fn()
复制代码

很简单的一段代码,最终输出的是3。函数内的a覆盖了外面的变量a,var a;并没有刷新a的值,因为真正在运行时的顺序应该是这样的

    var a = 5;
    function fn(){
        var a;
        a = 3;
        console.log(a)
    }
    fn()
复制代码

我们可以看到,写在下面的声明a的语句被提前到了函数的最上面,所以最后输出的是函数内部的变量a而不是外面的a = 5

    var a = 5;
    function fn(){
        console.log(a)
        var a = 3;;
    }
    fn()
复制代码

在这里又会发生什么呢?我们看一下运行结果:

可能有人会说为什么打印的不是5呢?这就是变量提升的神奇之处,使用var声明的变量在运行时该声明语句会被放在当前当前作用域的最上面。这里又涉及到一个作用域的概念,暂时可以简单理解为一对大括号就是一个作用域。 所以上面的代码在运行时的顺序应该是这样的:

    var a = 5;
    function fn(){
        var a;
        console.log(a)
        a = 3;;
    }
    fn()
复制代码

变量提升只是把声明语句提升上去,而赋值语句是不会被提升的。明显可以看到在函数内部还是新创建了一个变量a,但是在打印前都没有给a赋值,所以最后打印出来的值是‘undefined’ ###函数### 除了变量提升意外,函数也是存在这样的现象,我们来看一段代码

    // 代码一
    fn()
    function fn(){
        console.log(0)
    }
    
    //代码二
    fn()
    var fn = function() {
        console.log(0)
    }
复制代码

直接看结果:

代码一运行正常,代码二就报错了。因为代码二的实际运行顺序其实这样的

    var fn;
    fn();
    fn = function() {
        console.log(0)
    }
复制代码

很显然,执行fn();之前fn只是一个变量,以函数的方式调用变量肯定是错误的用法。

注意:es6提出的新指令let和const是不会发生变量提升现象的,所以在使用es6语法时,一定要先声明再调用。

到此,本人知道的有关JavaScript的变量提升方面的知识就只有这么多,如果有幸这篇文章被你看到了,相信你看完以后也会对这个知识点有个大概的了解了。如果觉得有什么地方说得不对的,欢迎指正。

转载于:https://juejin.im/post/5c62310051882561ad32778a


http://www.niftyadmin.cn/n/2008626.html

相关文章

Reddit引入Envoy支持架构改造,性能显著提升

Reddit引入Envoy到其后端框架,作为服务到服务代理以支持其正在进行的架构改进。通过采用Envoy作为服务到服务第4层/第7层代理,他们发现在可观察性、易采用性和性能上有显著的改进。Reddit引入Envoy到其后端框架,作为服务到服务代理以支持其正…

spring事件机制_http://enjiex.iteye.com/blog/1070094

Java提供了事件机制,在使用spring的时候,我们可以把普通的java事件操作定义为bean集成到bean容器中,但还有一种更方便的方式,即使用spring已集成的事件支持。在使用Spring的事件支持时,我们需要关注以下几个对象&#…

解决Spring Cloud中Feign/Ribbon第一次请求失败的方法___http://www.jb51.net/article/106944.htm

这篇文章主要给大家介绍了关于解决Spring Cloud中Feign/Ribbon第一次请求失败的方法,文中给出了三种解决的方法,大家可以根据需要选择对应的方法,需要的朋友们下面来一起看看吧。前言 在Spring Cloud中,Feign和Ribbon在整合了Hyst…

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

首先:CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,如div的display默认值为“block”,则为“块级”元素;span默认display属性值为“inline”&#xff0c…

windows10安装nodeJs及环境配置

学习于https://www.cnblogs.com/zhouy...

微信nickname乱码(emoji)及mysql编码格式设置(utf8mb4)解决的过程__https://segmentfault.com/a/1190000004594385

自己的练习项目中涉及保存微信的nickname,之前一直正常使用,但是突然遇到一个之前没有遇到的问题。经过调试发现错误如下:Incorrect string value: \xF0\x9F\x99\x88\xF0\x9F... for column nickname at row 1 经过仔细查看发现可以获得nickn…

反编译java class并优雅的调试--http://www.blogjava.net/miaoyachun/archive/2013/02/22/395575.html

https://sourceforge.net/projects/realignmentjd/files/ 官方文档 用jd-eclipse 插件来反编译java class文件的输出还是挺nice的,虽然阅读方便了 但是对debug确造成一定的困扰,主要问题是line number的不match. Google了下遇到类似问题的真不少。最终找…

centos7安装最新版git_https://my.oschina.net/antsky/blog/514586

whoru 发表于 2年前 阅读 5961收藏 10点赞 1评论 1 腾讯云 普惠云计算 0门槛体验>>> 摘要: 介绍yum和源码包安装的具体方式 方式一、yum安装 # yum install git 通过yum方式安装,版本比较旧,CentOS6.5上安装好是1.7.1版。如果想安装最新版或…