var
var声明范围是函数作用域
var声明提升:使用var声明的变量会自动提升到函数作用域的顶部,此外使用var重复声明同一个变量也没有问题,因为“提升”会将所有变量声明都拉到函数作用域的顶部,此时JavaScript引擎会自动将多余的声明在作用域顶部合并为一个声明,所以反复声明同一个变量也没有问题。
例如:
console.log(age)//18 var age=18
var age=18;
var time =2022;
console.log(age);//18
console.log(time);/2022
var age,time;
age=18;
time=2022;
console.log(age)//18
console.log(time)//2022
let
let声明范围是块作用域
例如:
if(true){ let age=18; console.log(age);//18 } console.log(age)//ReferenceError: age 没有定义
这里因为他的作用域只限于该块内部,所以导致了报错
同时let的声明不会在作用域中被提升:
在解析代码时,JavaScript引擎也会注意到块后面的let声明,严格来讲其实let也会被提升,但是由于暂时性死区("temporal dead zone"),在let声明前执行都会抛出ReferenceError
let在全局作用域中声明的变量不会成为window对象的属性(var则会)
在使用var的时候,最常见的问题就是对迭代变量的奇特声明和修改。
例如:
for(var i=0;i<5;i++){ setTimeout(()=> console.log(i),0) } //此时输出的为5、5、5、5、5
之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时逻辑时,所有的i都是同一个变量,因而输出的都是同一个最终值。
§而在使用let声明迭代变量时,JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量(let声明的变量作用域只有块)。所以每次循环setTimeout引用的都是不同的变量实例,所以console.log输出的是我们期望的值,也就是循环执行过程中每个迭代变量的值。§
for(let i=0;i<5;i++){ setTimeout(()=> console.log(i),0) } // 此时输出的为0、1、2、3、4
const
const的行为与let基本相同,主要区别在于用它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行时错误。
const声明的限制只适用于它指向的变量的引用。所以const声明的变量,其内部的属性是可以被修改的。