var, let, 以及 const 都是在 JavaScript 用来做变量声明的保留字,在 JavaScript 早期只有 var,直到 ES2015 (ES6) 时才加入了 let 与 const 。
他们之间主要有 4 个不同
- 在作用域上,
var可以是全局、也可以是以函数作为范围;let与const则是以区块作为范围。 - 在声明上,
var可以被重复声明,但是let与const则不行。 - 在提升上,
var声明的变量会自动初始化值为undefined,因此在声明前就使用变量,不会出现错误,而会是undefined;但是let与const声明的变量则不会自动初始化,而是会进到 暂时死区 (TDZ),因此在let与const声明变量前使用该变量,会出现错误。 let与const在绝多数面向都是一样,两者的一大区别在于,用let声明的变量可以重新赋值,但是用const的不行。
作用域的差别
在作用域上, var 可以是全局、也可以是以函数作为范围, let 与 const 则是以区块作为范围。;当我们在一个文件的最外层使用 var 来声明变量,这时它的范围会是全局,因此当我们在 console 当中输入
var greeting = "hello";
我们可以接着输入
window.greeting; // "hello"
其结果会是 hello,但是用 let 与 const 声明则不会有同样效果。而除了全局, var 在某个函数中范围则是该函数。
var 可以重复声明
在声明上, var 可以被重复声明,但是 let 与 const 则不行。所以当使用 var 时,可以做到以下这样:
var greeting = "Hello! This ExplainThis :)";
var greeting = "ExplainThis is a website that helps you learn programming!";
let 可以重新赋值,但不能重复声明,所以会如下面这样:
// 不行这样!不然会有 SyntaxError: Identifier 'greeting' has already been declared
let greeting = "Hello! This ExplainThis :)";
let greeting = "ExplainThis is a website that helps you learn programming!";
// 可以这样 :)
let greeting = "Hello! This ExplainThis :)";
greeting = "ExplainThis is a website that helps you learn programming!";
变量提升上的差别
在变量提升上, var 声明的变量会自动初始化,因此在声明前就使用变量,不会出现错误,而会是 undefined ,例如下面这样
console.log(greeting); // undefined
var greeting = "hi there";
但是 let 与 const 则不会,而是会进到 暂时死区 (TDZ),因此在 let 与 const 声明变量前使用该变量,会出现错误:
console.log(greeting); // Uncaught ReferenceError: greeting is not defined
let greeting = "hi there";
let 可以重新赋值 const 不行
let 与 const 在绝多数面向都是一样,两者的一大区别在于,用 let 声明的变量可以重新赋值,但是用 const 的不行。
特别注意,这边指的差别是在于“ 赋值”,而不是改变某个变量。如果是改变某个变量,若该变量是 原生值 (primitive values),例如字符串、数字, let 与 const 都不能改变;但假如该变量是 对象 (objects),则不论 let 或 const 在声明后,都仍是可以改变该对象。
所以下面这个例子是可行的
const user = { name: "小明" };
user.name = "小王";
console.log(user); // {name: '小王'}