JavaScript之变量提高

场景

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