变量声明 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

你可能感兴趣的:(变量声明 var、let、const)