JavaScript中var 和let的区别，四个概念变量提升，作用域，重复声明，暂时死区以及从生命周期去看它

￡神魔★判官ぃ 2022-05-22 12:25 103阅读 0赞

## 前言 ##

今天无意当中遇到了js中的变量声明，发现除了var居然还有let声明方法，比较新奇，特地记录下来它们两者的区别！绝对能让你理解清楚，PS 后面有重头戏

## 思路 ##

主要从四个角度来讲述它们的区别

*  变量提升
 *  作用域
 *  重复声明
 *  暂时死区

## 变量提升 ##

概念：  
　　变量的声明会被提升到函数的最顶部，也就是说，可以先使用 再声明。var 可以 let不可以。

a = 1;
    var a;
    console.log(a);  //1 
    
    b = 1;
    let b ;
    console.log(b);  // 引用报错

![这里写图片描述][70]

但是变量的初始化 是不能提升的！对var和let处理的方式也是不一样的。

console.log(a);  // undifined
    console.log(b);  // 引用报错
    
    var a = 1;
    let b = 2;

## 作用域 ##

概念：  
　　var 的作用域不是块级的，也就是说，在一个地方声明，所有的地方都能对它进行读取，而let是块级的

{
        var c =1;
    
    }
    {
        let d = 2;
    }
    console.log(c);  // 1
    console.log(d);  // 引用报错

var a = 1;
    {
        var a = 2;
    }
    
    let b = 1;
    {
        let b = 2;
    }
    console.log(a);  // 2
    console.log(b);  // 1

为了更好的理解，我们直接用\{\}来表明我们的作用域，可以看到，在\{\}之外依然能访问var变量而不能访问let变量。

## 重复声明 ##

概念：  
　　var变量能够重复声明，而let变量是无法重复声明的。

var a = 1;
    var a = 2;
    let c = 1;
    let c = 2;  // 报错

## 暂时死区 ##

知道了变量提升之后，我们可以了解一下暂时死区

console.log(a);  // undefined
    console.log(b);  // 引用报错
    var a;
    let b;

主要就是，生命周期不一样，var变量声明和初始化一起的，而let声明和初始化是分开的，声明和初始化中的区域就叫暂时死区。具体的可以参考这篇声明周期的文章，不再多说了。  
[声明周期理解的链接][Link 1]

## 更进一步 ##

原链接：([https://zhuanlan.zhihu.com/p/28140450][https_zhuanlan.zhihu.com_p_28140450])  
它主要讲的是 var 和 let在for循环中的问题，可以看看，还有let是否真的是不能提升。

[70]: /images/20220522/4c0fa66bd8a04c12a496b286e32af98c.png
[Link 1]: https://www.qcyoung.com/2016/08/03/%E3%80%90%E8%AF%91%E3%80%91JavaScript%20%E5%8F%98%E9%87%8F%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%EF%BC%9A%E4%B8%BA%E4%BB%80%E4%B9%88%20let%20%E4%B8%8D%E5%AD%98%E5%9C%A8%E5%8F%98%E9%87%8F%E6%8F%90%E5%8D%87/#code-let-code-bian-liang-de-sheng-ming-zhou-qi
[https_zhuanlan.zhihu.com_p_28140450]: https://zhuanlan.zhihu.com/p/28140450