JS变量提升以及函数提升

在正题开始之前，让我们先来总结一下：
首先，我们需要明白浏览器是如何解析JS代码的，浏览器引擎在读取JS代码的过程中，分为两步。
第一个步骤是整个JS代码的解析读取，第二个步骤是执行。
在读取代码的过程中，就产生了将所有声明提升到顶端，然后再从上往下执行。由此产生了变量提升和函数提升。
1.变量提升只会提升变量名的声明，而不会提升变量的赋值初始化。
2.函数提升的优先级大于变量提升的优先级，通俗点说就是函数提升在变量提升上面。
记住上面的两句话，你就可以非常从容的去撸代码了

来看一些代码，在你的心中默默地猜测一下打印的结果

console.log(fn);
        fn();//可以执行
        var fn = 10;
        fn();//fn已经被赋值为一个变量，无法执行foo为函数
        console.log(fn);
        function fn() {
            var a;
            console.log(a);
            a = 12;
            console.log(a);
        }
        console.log(fn);

怎么样，你的心里是不是有一个结果了。来看一看你对了多少

看完结果，心里是不是有点疑问？让我们看一下它的执行顺序

       function fn() {
            var a;
            console.log(a);
            a = 12;
            console.log(a);
        }
        var fn;
        console.log(fn);
        fn();
        fn = 10;
        fn();//由于这里报错，fn已经被赋值，找不到这个函数，下面的都不会被执行
        console.log(fn);
        console.log(fn);

看完执行顺序，明白为什么会是上面的结果了吗？
再来看几个小例子

        function fn() {
            console.log(x); //输出结果为undefined
        };
        fn()                      
        var x = 5; 

明白为什么输出的结果为undefined吗？还记得上面说的变量提升的概念吗？变量提升只会提升变量名的声明，而不会提升它的赋值，所以当我们去调用fn这个函数时，x确实是提升到了最上面，但它的赋值并没有提升上去，所以我们得到的结果就是undefined。

        function fn() {
            console.log(x); //输出结果为5
        };
        var x = 5;  
        fn()  

为什么把调用和赋值换一下前后顺序就可以打印出一个5呢？这就是我们上面说的先把所有的声明都提升到顶端，然后再从上往下去执行。重点是从上往下，所以我们得到的结果为5

        console.log(f1());//第二个打印 结果为undefined；
        console.log(f2);//第三个打印 结果为undefined；
        function f1() { console.log('hello') }; //第一个打印 结果为hello
        var f2 = function () { };

为什么写在最后一行的代码会在第一个进行打印呢？这是不是就符合我们上面说过的函数提升的原则（函数提升的优先级大于变量提升的优先级），而剩下的两个打印都为undefined又是什么原因造成的呢？ 第一个undefined是因为函数没有返回值，所以为undefined，第二个是因为它是一个函数命名式，所以在提升的时候没有把赋值式提升上去，所以它的值也为undefined。

image.png

希望我的理解可以为一些人提供帮助。学识有限，如果那个地方出现错误或不足，感谢指出。