深入理解JavaScript中var、let与const的区别

前言

ECMAScript与JavaScript的关系

首先，需要厘清一个常见疑问：ECMAScript与JavaScript究竟是何种关系？

ECMAScript是一项国际标准的脚本语言规范，而JavaScript则是基于该规范实现的语言，并扩展了DOM（文档对象模型）和BOM（浏览器对象模型）等功能。简而言之，ECMAScript定义了JavaScript的语言语法和核心逻辑，而JavaScript则是ECMAScript在浏览器等环境中的具体实现与扩展。

2011年，ECMAScript 5.1版本正式发布，在此之前的很长一段时间里，开发者主要使用的是ES5标准。

2015年6月，ECMAScript 6（即ES2015）正式成为国际标准，带来了许多重要的语言特性。

回到本文的主题。

对于资深开发者而言，var、let和const的区别可能已是常识；但对于初学者来说，除了最熟悉的var，let和const的使用场景相对较少。

因此，本文将通过具体示例，详细介绍如何在JavaScript中灵活使用var、let和const来定义变量，并深入剖析它们之间的异同点。

如果希望直接了解结论，可以先看以下核心概念：

• var声明的变量值可被修改，若未初始化直接使用不会报错（值为undefined）。
• let声明的变量与var类似，但其作用域被限制在当前声明的代码块内。
• const声明的变量必须在定义时初始化，且一旦赋值后在作用域内不可更改。

var、let与const的核心区别

接下来，将通过具体示例详细展示三者的区别：

var声明与函数作用域

Var

var用于声明变量，并可在声明的同时进行初始化。

例如：

var a = 10;

• 变量的声明会在代码实际执行前被处理，这一现象称为变量提升。
• 使用var声明的JavaScript变量，其有效范围取决于当前的执行上下文。
• 若在函数外部声明变量，其作用域为全局。

参考以下代码片段：

function nodeSimplified() {
 var a =10;
 console.log(a); // 输出 10
 if(true) {
 var a=20;
 console.log(a); // 输出 20
 }
 console.log(a); // 输出 20
}

在上述代码中，变量a在if语句块内被重新赋值，该修改影响了全局作用域。因此，在if语句执行完毕后，修改后的值依然保留。这种行为类似于其他语言中的全局变量，但使用时需格外小心，因为可能会意外覆盖已有的全局变量。

let声明与块级作用域

let

let语句用于在块级作用域内声明局部变量。与var类似，可以在声明时对其进行初始化。

例如：

let a = 10;

• 该语句创建了一个变量，并将其作用域严格限制在所在的代码块内。
• 其行为与Java、C#等静态类型语言中的变量声明类似。

参考以下代码片段：

function nodeSimplified() {
 let a =10;
 console.log(a); // output 10
 if(true) {
 let a=20;
 console.log(a); // output 20
 }
 console.log(a); // output 10
}

这与其他大多数编程语言的行为表现一致。

function nodeSimplified() {
 let a =10;
 let a =20; // 抛出语法错误
 console.log(a); 
}

若尝试在相同作用域内重复声明同一变量，会报错："未捕获的异常:标识符'a'已经被声明过"。但如果使用var则不会报错：

function nodeSimplified() { 
 var a =10; 
 var a =20; 
 console.log(a); // 输出 20 
}

使用let语句能更好地维护变量的作用域。在使用内部函数时，let能使代码结构更清晰、整洁。

希望上述示例能帮助你更好地理解var和let的区别。如有任何疑问，欢迎在评论区留言。

const声明与常量不可变性

const

const声明的变量只能被赋值一次，此后不可再重新赋值。const的作用域规则与let相同，均为块级作用域。

例如：

const a = 10;
function nodeSimplified() {
 const MY_VARIABLE =10;
 console.log(MY_VARIABLE); // 输出 10 
}

按照命名规范，常量通常建议使用大写字母命名。虽然const a = 10在代码中能起到相同作用，但为了代码的长期可维护性，建议遵守这一命名规范。

问题：如果尝试给const变量重新赋值会发生什么？参考以下代码：

function nodeSimplified() {
 const MY_VARIABLE =10;
 console.log(MY_VARIABLE); // 输出 10
 MY_VARIABLE =20;  // 抛出类型错误
 console.log(MY_VARIABLE); 
}

错误信息为："未捕获的类型错误:给const变量赋值"。

当尝试修改已存在的const变量时，JavaScript引擎会抛出类型错误。

介绍到此结束，希望这篇简短的文章能帮助你更好地理解JavaScript中不同变量声明关键字的差异。

总结

以上就是本文的全部内容，希望这些内容对您的学习或工作有所帮助。如有疑问，欢迎留言交流，感谢支持。