变量声明 var、let、const

1. var变量声明提升

var声明的变量，发生变量声明提升;即：变量的声明被提升到该作用域的顶部
let 和 const 声明的变量不会发生变量提升，产生暂时死区(TDZ)，访问a的时候变量没有声明，会报错; 注：由于出现let声明，所以出现TDZ

    var a=10;
    function fn(){
        console.log(a)
        var a=90
    }
    fn()

    // 相当于以下代码：

    var a=10;   // 全局变量a
    function fn(){
        var a      // 局部变量a，变量a的声明提升到此处了
        console.log(a) // 变量a只是声明了，没有定义，所以是undefined
        a=90      // 变量a被定义
    }
    fn() // 打印undefined，变量声明提升，代码按顺序执行

2. 预处理

在局部作用域中，如果有局部变量，则不会访问同名的全局变量，否则，访问全局变量
var的变量声明提升也是由于存在着预处理

    var a=10;
    function fn(){
        // TDZ 开始
        console.log(a)
        // TDZ结束，'a'仅在此处初始化，值为20
        let a=20
    }
    fn() // 报错 Uncaught ReferenceError: Cannot access 'a' before initialization

3. 作用域

let和const声明的变量会产生块级作用域
var声明的变量会穿透if和for语句，不会产生块级作用域

    var array=[]
    for(var i=0;i<3;i++){
        array.push(()=>i)
    }
    console.log(array) // [f,f,f],其中每个f都是()=>i
    var newArray=array.map(el=>el()) //使用map循环执行array中的每个元素(即f函数）此时循环已经结束，i为3
    console.log(newArray) // [3,3,3]

解释：误解作用域，认为for循环产生了块级作用域; 在for循环中使用var声明的变量，是单个声明的变量绑定 (单个存储空间)，循环过程中，这个var声明的变量i是会随着循环变化的，但是，在循环中执行的数组push方法，最后实际上都push了i最终循环结束的3这个值，最后结果为[3,3,3]

解决以上问题就是需要创建真正的块级作用域
方案1 :使用let声明循环变量，这个为每个循环迭代创建一个新的绑定

    var array=[]
    for(let i=0;i<3;i++>){
        array.push(()=>i)
    }
    var newArray=array.map(el=>el())
    console.log(newArray)  // [0,1,2]

方案2:使用闭包，形成块级作用域

    var array=[]
    for(var i=0;i<3;i++){
        array[i]=(function(x){
            return function(){
                return x
            }
        })(i)
    }
    var newArray=array.map(el=>el())
    console.log(newArray) // [0,1,2]

4.作用域链

如果当前作用域找不到变量声明，则沿着作用域链向上查找，直到找到该变量，否则undefined

    var a=10;
    function fn(){
        console.log(a)
    }
    fn()  //最后打印的结果是：10

最后编辑于：2020.07.28 14:22:39