JavaScript之变量提升

young.li 发布于2019-08-26 11:59 / 2182人阅读

摘要：原文是这样说的不像那样会发生变量提升现象。这就导致了所有变量声明的语句都会被提升到代码的最前面。这就是变量提升。注意提出的新指令和是不会发生变量提升现象的，所以在使用语法时，一定要先声明再调用。

场景

开始读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的变量提升方面的知识就只有这么多，如果有幸这篇文章被你看到了，相信你看完以后也会对这个知识点有个大概的了解了。如果觉得有什么地方说得不对的，欢迎指正。

云服务器 idc机房托管 js变量声明提升 javascript提升 javascript变量 javascript定义变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107978.html

进击JavaScript之（一）变量声明提升

摘要：如下代码输出的结果是代码执行分为两个大步预解析的过程代码的执行过程预解析与变量声明提升程序在执行过程中，会先将代码读取到内存中检查，会将所有的声明在此进行标记，所谓的标记就是让解析器知道有这个名字，后面在使用名字的时候不会出现未定义的错误。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代码输出的结果是...

LeexMuller 2019-08-20 10:13 评论0 收藏0
【前端工程师手册】JavaScript之作用域

摘要：函数作用域和块作用域前面讲了是词法作用域，那么什么时候会创建作用域呢主要是基于函数级别的作用域，也就是每一个函数都会创建一个作用域。函数会被当作函数表达式而不是一个标准的函数声明来处理。什么是作用域来一段《你不知道的JavaScript-上卷》中的原话：几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个值进行访问或修改，这些变量住在哪里?换句话说，它...

Paul_King 2019-08-22 17:06 评论0 收藏0
【译】理解JavaScript：作用域

摘要：作用域是代码的不同部分在运行期间的可见性。大多数开发者想当然地理解作用域，但毫无疑问，有它自己的说明。变量可能是全局作用域的，或者是方法作用域的。总而言之，不要重复声明变量，使用良好命名，尽力避免在声明前调用和执行任何东西。原文链接：https://hackernoon.com/unders... 什么是作用域？就像JavaScript中的其他东西一样，作用域并无特别之处。尽管大多...

betacat 2019-08-22 17:13 评论0 收藏0
JavaScript之作用域和闭包

摘要：依然持有对该作用域的引用，而这个引用就叫作闭包。循环和闭包正常情况下，我们对这段代码行为的预期是分别输出数字，每秒一次，每次一个。一、作用域作用域共有两种主要的工作模型：第一种是最为普遍的，被大多数编程语言所采用的词法作用域，另外一种叫作动态作用域； JavaScript所采用的作用域模式是词法作用域。 1.词法作用域词法作用域意味着作用域是由书写代码时函数声明的位置来决定...

animabear 2019-08-22 17:22 评论0 收藏0