js变量提升

这两天老师讲到了变量提升这个概念，然后出了几道题给我们做，我当场就卡死。归根结底还是没理解透彻，变量提升里面的一些规则没明白。因此，小陈同学我在课下仔细查阅了一翻，终于将它搞清楚了。所以，趁热打铁，赶紧记录下来。

首先，讲讲变量提升的原因，即为什么要进行变量提升。

这是我查阅的资料，参考一下：

　　“js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而其他的语句都不会改变他们的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行。”

　　也就是说，在编译的时候，页面上所有的变量都已经被声明了，但是都还没有赋值，即数据类型暂为undefined。

接下来就用一个小例子来理解一下变量提升。

 //例1
a = 5
var a
console.log(a)

那么这里会打印出什么呢？按照正常的从上到下的逻辑思路，第2行的a并没有被定义，所以第四行打印a时应该会报错说 a is not defined，但是，注意注意，这里的a被提升了。

“变量提升会将当前作用域的所有变量的声明提升到程序的顶部”，意思就是说，虽然在第2行的a没有用关键字 var 定义，但是编译时会查找所有的var，把它们放到该作用域的最顶部，相当于以下的代码执行过程：

var a
a = 5
console.log(a)

打印结果为 5。

感觉已经get到了么？再跟我一起来看看下一个例子吧。

//例2
console.log(a)
a = 5
var a

是不是跟例1很像？只不过把赋值语句跟打印语句调换了一下位置。那么现在第2行的执行结果是打印出什么呢？结果是 undefined。回忆一下变量提升的操作，把所有的var都提到最顶部，在这里就是把 var a 放到最开头，接下来就是console.log(a)，很明显，这里的a还没被赋值，是在打印语句之后才被赋值，所以，已定义但未赋值的变量的数据类型是undefined，所以打印结果是undefined。

理解到简单的定义之后，就要思考一下相对比较复杂的变量提升了，我们结合函数来看看。

第一种情况：函数有参数，且与函数内部的变量同名

function show(a){
    console.log(a);//10
    var a=20
    console.log(a);//20
    }
show(10)

开始学函数参数的时候，老师跟我们说，形参就相当于是在函数内部定义了一个变量，就是var 了一个变量；然后实参传进来就相当于是给这个变量赋了值。接下来我们就可以沿着这个思路去分析。还有一点：参数名和变量名同名，参数优先级高于变量提升

因为参数变量提升优先级高，所以在函数被调用后，参数传值的执行顺序是在变量赋值之前的，即var a之后，是 a = 10（传参），相当于以下的代码执行顺序：

function show(){
      var a
      a = 10
      console.log(a);//10    
      a = 20
      console.log(a);//20
}    
show()

第二种情况：函数没有参数，函数内部的变量未以关键字 var 定义

直接上代码

    function show(){
            a=10    //不加var，此处的a就变成了全局变量
            console.log(a); //10
        }
        
        show()
        console.log(a); //10 

注意看第2行的a，它前面没有 var 关键字，此时，当show函数被调用后，a就被添加到了window对象中，成为了一个全局变量，全局变量在script的任何地方都能被访问，所以最后一行，在函数外部也能访问 a，结果打印10（如果前面没有调用show，即show（），那么a就没被创建，即未定义）

第三种情况：函数 有/无 参数，函数内部的变量以 var 定义

此时的var 后面的变量就是一个局部变量，也就是说，这个变量只能在其作用于内部被访问。

        function show(){
            var a=10
            console.log(a); //10
        }
        show()
        console.log(a);// a is not defined 局部变量 不能在外边被访问 

第四种情况：函数外部的全局变量跟函数内部的局部变量同名

        var tt = 'aa';  
        function test(){  
            alert(tt);  //先变量提升，tt在全局和函数内部都有，优先考虑局部变量提升，所以var tt提到alert上面，即undefined
            var tt = 'dd';  //局部变量赋值，所以tt现在有值了，为"dd""
            alert(tt);  //弹出dd
        }  
        test();

当局部变量和全局变量都有提升时，优先考虑局部变量提升。

第五种情况：函数提升跟变量提升的变量重名

函数也是一个变量，可以用函数声明的方式定义，也可以用函数表达式的方式定义，所以也存在函数提升。

“当有多个同名变量声明的时候，函数声明会覆盖其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。”

举个例子来解释一下：

        fn();

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

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

在这里，第一行就先调用了函数fn。因为出现变量重名的情况时，函数声明高于所有变量声明，即函数声明最先实现，那么第3行和第9行的function fn就最先被声明，又因为如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明，所以第9行的fn会覆盖第3行的fn，相当于fn这个函数的函数主题就是第9行下边的内容。紧接着就是fn被调用（第一行），依次执行，输出结果打印2，10（局部变量）。然后执行到第14行的时候，因为变量提升，var fn 已经提到顶部去了，所以这里只剩下赋值语句 fn = function{console.log('3')}，相当于给fn赋了一个新的值，就跟 var a = 1； a = 5 是一个道理。此时打印fn，则输出的是这个新的函数内容 function{console.log('3')}。那么，如果在这后面再调用一次fn，会输出什么呢？结果是3。因为此时fn就是一个新的函数了，他的主体部分就是打印字符3。

好啦，今天的分享就到这里了。小陈同学是小白，有不对的地方欢迎指正，也请多多包涵，嘻嘻。