前言
今天无意当中遇到了js中的变量声明,发现除了var居然还有let声明方法,比较新奇,特地记录下来它们两者的区别!绝对能让你理解清楚,PS 后面有重头戏
思路
主要从四个角度来讲述它们的区别
- 变量提升
- 作用域
- 重复声明
- 暂时死区
变量提升
概念:
变量的声明会被提升到函数的最顶部,也就是说,可以先使用 再声明。var 可以 let不可以。
a = 1;
var a;
console.log(a); //1
b = 1;
let b ;
console.log(b); // 引用报错
但是变量的初始化 是不能提升的!对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声明和初始化是分开的,声明和初始化中的区域就叫暂时死区。具体的可以参考这篇声明周期的文章,不再多说了。
声明周期理解的链接
更进一步
原链接:(https://zhuanlan.zhihu.com/p/28140450)
它主要讲的是 var 和 let在for循环中的问题,可以看看,还有let是否真的是不能提升。