声明变量提升

一、变量声明提升

在函数中定义（声明）变量，不管这个变量在函数的任何位置，经过预解析时，浏览器会把变量声明提升到函数执行的最开始的位置 。

话不多说，直接上代码：

<input type="button" value="测试" onclick="fn()">

 function fn(){
         console.log(a);  // 定义变量 a 之前，就输出 a；
         var a = 10;
         console.log(a);  // 定义变量 a 并赋值之后，输出 a；
}

这里的输出结果：

分析:
这里输出两个 a ，并且两个 a 输出的值都不一样；
第一个 a ，并不是大家想的输出（a is not defined ），而是 undefined，因为它没赋值；
第二个 a ，中间已经 var a = 10； a 已经赋好值了；因此，这里输出 a = 10；

出现这种情形，是因为浏览器的预解析，下面是浏览器的预解析的代码：

<input type="button" value="测试" onclick="fn()">

 function fn(){
        var a 
        console.log(a); //undefined
        a=10;
        console.log(a);；// 10
}

这才是预解析之后的代码，这样就更容易理解，在函数开始的时候，将声明的变量 a 提前到函数体前面；
注意：这里声明提升的是 变量！！不是 赋值

二、当变量声明提升 遇到 作用域

<input type="button" value="测试" onclick="fn()">

       var a = 20;
    function fn(){
        console.log(a);  //打印 undefined，这里是 a 是局部变量  
        var  a=10;  
    }

打印结果：

看看这里 a 的输出结果是什么？？？
在这里，a 输出的是 undefined！！
因为，预解析不会输出 is no defined ；
输出的 a 是局部变量 a（全局变量a 和 局部变量 a），因为就近原则，并且预解析提升a 的声明，这里打印的 a 为 undefeind