JS-var、let和const的区别

发表于 | 分类于

简单介绍

1
2
3
var 是全局变量。
const 是常量，一般固定不会变的，就存为常量。
let 是变量，你设为了 let ，那就必须要使用这个变量，不然会出警告或者报错。

let 和 const 是 ES6 发布以后新的变量声明方式。
let 的用法类似于 var，但是 let 只在所在的代码块内有效，所以我们一般使用 let 替代 var。而 const 用来声明常量。
我们根据这几个方面来介绍 var、let和const的区别：变量提升、暂时性死区、重复声明、初始值和作用域。

一、变量提升

概述：变量可在声明之前使用。
var 命令经常会发生变量提升现象，在变量未声明之前可以使用，不会报错。在ES6 规定 let 和 const 命令不发生变量提升，使用 let 和 const 命令声明变量之前，该变量是不可用的，否则会报错。

二、暂时性死区

概述：如果在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

三、重复声明

概述：指在相同作用域内，重复声明同一个变量。
let 和 const 命令声明的变量不允许重复声明；var 是允许重复定义的，但这样会导致后声明的同变量（变量名相同）覆盖掉前声明的同变量（变量名相同）。

四、初始值

由于 const 声明的是只读的常量，一旦声明，就必须立即初始化，声明之后值不能改变。

五、作用域

在 ES5 中只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。
第一种场景，var 声明的内层变量可能会覆盖 var 声明的外层变量。

1
2
3
4
5
6
7
8
9
10
var tmp = new Date(); // 处于全局作用域

function f() {
  console.log(tmp); // 处于函数作用域
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

第二种场景，用来计数的循环变量泄露为全局变量。

1
2
3
4
5
6
var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}

console.log(i); // 输出 5

参考文献