在 JavaScript 中用 var, let, 以及 const 有什么区别

84 阅读3分钟

var, let, 以及 const 都是在 JavaScript 用来做变量声明的保留字,在 JavaScript 早期只有 var,直到 ES2015 (ES6) 时才加入了 letconst

他们之间主要有 4 个不同

  1. 在作用域上, var 可以是全局、也可以是以函数作为范围; letconst 则是以区块作为范围。
  2. 在声明上, var 可以被重复声明,但是 letconst 则不行。
  3. 在提升上, var 声明的变量会自动初始化值为 undefined,因此在声明前就使用变量,不会出现错误,而会是 undefined ;但是 letconst 声明的变量则不会自动初始化,而是会进到 暂时死区 (TDZ),因此在 letconst 声明变量前使用该变量,会出现错误。
  4. letconst 在绝多数面向都是一样,两者的一大区别在于,用 let 声明的变量可以重新赋值,但是用 const 的不行。

作用域的差别

在作用域上, var 可以是全局、也可以是以函数作为范围, letconst 则是以区块作为范围。;当我们在一个文件的最外层使用 var 来声明变量,这时它的范围会是全局,因此当我们在 console 当中输入

var greeting = "hello";

我们可以接着输入

window.greeting; // "hello"

其结果会是 hello,但是用 letconst 声明则不会有同样效果。而除了全局, var 在某个函数中范围则是该函数。

var 可以重复声明

在声明上, var 可以被重复声明,但是 letconst 则不行。所以当使用 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";

但是 letconst 则不会,而是会进到 暂时死区 (TDZ),因此在 letconst 声明变量前使用该变量,会出现错误:

console.log(greeting); // Uncaught ReferenceError: greeting is not defined
let greeting = "hi there";

let 可以重新赋值 const 不行

letconst 在绝多数面向都是一样,两者的一大区别在于,用 let 声明的变量可以重新赋值,但是用 const 的不行。

特别注意,这边指的差别是在于“ 赋值”,而不是改变某个变量。如果是改变某个变量,若该变量是 原生值 (primitive values),例如字符串、数字, letconst 都不能改变;但假如该变量是 对象 (objects),则不论 letconst 在声明后,都仍是可以改变该对象。

所以下面这个例子是可行的

const user = { name: "小明" };
user.name = "小王";
console.log(user); // {name: '小王'}