变量声明的演变：var 、let 与 const

阳阳羊
99 阅读4分钟

前言

JavaScript作为一门持续演变的语言，变量声明在其发展历程中也经历了多次改进。

本文将深入研究var、let和const三种不同的变量声明方式，探讨它们在作用域、变量提升、不可变性等方面的异同，帮助大家更好地理解和运用这些关键字！

var

  1. 变量提升： 在JavaScript引擎解释执行代码之前，会进行词法分析和变量提升。对于var声明的变量，会在词法分析阶段将其声明提升到函数或全局作用域的顶部，但初始化部分保留在原位置。这导致了在变量声明之前访问变量会得到undefined的值。

例子：

console.log(a);//undefined
var a = 1

我们将打印放在声明前面，这样就导致调用一个未声明的变量，按道理应该会报错。

可是执行发现打印没有报错，而是打印undefined。

这是因为var声明的变量会声明提升，在执行代码之前会进行编译（详情请参考JavaScript预编译：你所不知道的代码执行前奏），将变量声明提升到函数或全局顶部，这会导致引擎将代码执行成下面这样：

var a
console.log(a);//undefined
a = 1

所以打印的是undefined而不是报错。而用let、const声明的变量就不存在声明提升。

  1. var 变量可以重新声明和修改：
var a = 1
var a = 2
console.log(a);//2

----------------------------

var a = 1
a = 2
console.log(a);//2

let

  1. 块级作用域： 使用let声明的变量具有块级作用域，意味着它们只在包含它们的块内部可见。
  2. 暂时性死区（TDZ）： 使用let声明的变量在声明前无法被访问，这就是暂时性死区的概念。
let a = 1
if(true){
    console.log(a);//ReferenceError: Cannot access 'a' before initialization
    let a = 2
}

let a = 2的声明在if语句块内，let与{}形成了块级作用域，导致这个变量只在该块内部可见。虽然let a = 2的声明被提升到if语句块的顶部，但在实际的执行过程中，在声明前访问a会导致ReferenceError。这是因为变量a处于暂时性死区，只有在实际声明语句执行时才会被赋值。所以这个地方打印报错。

  1. let 可以被修改但是不能被重新声明：
let a = 1
let a = 2
console.log(a);//SyntaxError: Identifier 'a' has already been declared

let a = 1
a = 2
console.log(a);//2

const

  1. 块级作用域： 与let一样，const也遵循块级作用域规则。
  2. 暂时性死区（TDZ）： 与let一样，const也有暂时性死区的概念。

这里就不过多赘述。

  1. const 不能被修改并且不能被重新声明:
const a = 1
a = 2
console.log(a);//TypeError: Assignment to constant variable.

-------------------------------------------------------

const a = 1
const a = 2
console.log(a);//SyntaxError: Identifier 'a' has already been declared
  1. const 声明的变量需要初始化:
const a
a = 2
console.log(a);//SyntaxError: Missing initializer in const declaration

以下是我设计的一个表格：

varletconst
作用域全局或函数块级块级
暂时性死区不存在存在存在
重复声明可以不可以不可以
修改变量值可以可以不可以
是否初始化否否是

总结

  1. var声明是全局作用域或函数作用域，而let和const是块作用域。
  2. var变量可以在其范围内更新和重新声明；let变量可以被更新但不能重新声明； const变量既不能更新也不能重新声明。
  3. 它们都被提升到其作用域的顶端。但是var变量被赋为undefined，而let和const变量隐匿了，即暂时性死区。
  4. 尽管可以在不初始化的情况下声明var和let，但是在声明期间必须初始化const。

最后

本文详细探讨了JavaScript中变量声明的演变，聚焦于var、let和const这三种关键字。在实际开发中，开发者应根据需求选择合适的声明方式，遵循最佳实践，以提高代码的质量和可读性。希望这篇文章能够给你带来帮助！

我的Gitee：    CodeSpace (gitee.com)

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 “点赞 收藏+关注” ，感谢支持！！

avatar
文章
阅读
粉丝