JS变量声明:var、let、const三个关键字的区别

var在ECMAScript的所有版本中都可以使用,而const和let只能在ES6及更晚的版本中使用。
var,let,const三个关键字的区别:

  • var

1. 声明作用域:在函数内部,使用var定义一个变量(局部变量),在函数被调用完之后,该变量会被立即销毁。在定义变量时如果省略var,就会创建一个全局变量(不建议在局部作用域中定义全局变量,难维护,而且在严格模式下,会导致抛出ReferenceError)。
2. 声明提升:把所有变量声明都拉到函数作用域的顶部。

function foo(){
       console.log(age);
       var age = 18;
}

等价于

function foo(){
    var age;
    console.log(age);
    age = 18;
}
foo();//undefined

 

3. 可以反复多次使用var声明同一个变量。

function foo(){
   var age = 16;
   var age = 1;
   var age = 2;
   console.log(age);
}
foo();//2

4. 全局声明:使用var在全局作用域中声明的变量会成为window对象的属性。

var age = 18;
console.log(window.age);//18
  • let

1.声明作用域:let声明的是块作用域,而var声明的是函数作用域。块作用域是函数作用域的子集,所以var作用域的限制同时也适用于let。

//var
if(true){
    var age = 18;
    console.log(age);//18
}
console.log(age);//18

//let
if(true){
    let age = 18;
    console.log(age);//18
}
console.log(age);//ReferenceError:age没有定义

2.声明提升:let声明的变量不会在作用域中被提升。

3.不可以在一个块中反复多次使用let声明同一个变量。

let age;
let age;//SyntaxError,标识符age已经声明过了

4.全局声明:使用let在全局作用域中声明的变量不会成为window对象的属性,但是var声明的变量会。

let age = 18;
console.log(window.age);//undefined

5.条件声明:在使用var声明变量时,由于声明会被提升,js会自动将多余的声明在作用域顶部合并为一个声明。而因为let的作用域是块,所以不可能检查前面是否已经使用let声明过同名变量。因此对于let,不能依赖条件声明模式。

6.for循环中的let声明:在用let声明迭代变量时,js在后台会为每个迭代变量声明一个新的迭代变量,每个setTimeout引用的都是不同的迭代变量。for-in 和for-of都适用。

for(var i=0;1<5;i++){}
console.log(i);  //5

for(let i=0;1<5;i++){}
console.log(i);  //ReferenceError:i没有定义



for(var i=0;1<5;i++){
    setTimeout(()=>console.log(i),0);
}
//会输出5,5,5,5,5

for(let i=0;1<5;i++){
    setTimeout(()=>console.log(i),0);
}
//会输出0,1,2,3,4
  • const

1.const的行为和let基本相同,唯一的区别是const它声明变量时必须同时初始化变量,且尝试修改const声明的变量会导致运行时错误(TypeError)。

2.不允许重复声明。

3.作用域也是块。

4.const声明的限制只适用于它指向的变量的引用。换句话说,如果const变量引用的是一个对象,那么修改这个对象内部的属性并不违反const的限制。

5.不能用const声明迭代变量,因为迭代变量会自增。但是可以声明一个不会被修改的for循环变量。这对for-in 和for-of循环特别有意义。

 

另外,通过var定义的全局变量和函数,都会成为window对象的属性和方法,但是使用let和const的顶级声明不会定义在全局上下文中,但在作用域链解析上效果是一样的。

var a = 1;
let b = 2;
const c = 3;
console.log(window.a); // 输出 1
console.log(window.b);// 输出 undefined
console.log(window.c);//输出 undefined

  

 

posted @ 2020-11-10 11:10  艾卡西亚的暴雨  阅读(180)  评论(0)    收藏  举报