JavaScript 基础系列之 let、const 以及 var 的区别

[yuanyuanbyte]

本系列的主题是 JavaScript 基础，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

let、const 以及 var 的作用

var 语句 用于声明一个函数范围或全局范围的变量，并可将其初始化为一个值（可选）。

let 语句声明一个块级作用域的局部变量，并可以初始化为一个值（可选）。

const 语句声明一个常量，是块级范围的，非常类似用 let 语句定义的变量。但常量的值是无法（通过重新赋值）改变的，也不能被重新声明。

• 使用 const 声明创建一个常量必须有一个初始值，也就是说，必须在声明的同一语句中指定它的值（因为以后不能更改）。

• const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。在引用内容是对象的情况下，这意味着可以改变对象的内容（例如，其参数）。

let、const 以及 var 的区别

(1) 初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

(2) 给全局添加属性： var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会（浏览器的全局对象是window，Node的全局对象是global）。

• 在全局上下文中，使用 var 声明的变量将作为全局对象的不可配置属性被添加。
• let 和 const 不会在全局声明时（在最顶部的范围）创建 window 对象的属性。

(3) 块级作用域： let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

• 内层变量可能覆盖外层变量；
• 用来计数的循环变量泄露为全局变量。

(4) 变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

(5) 暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区（TDZ，temporal dead zone）。使用var声明的变量不存在暂时性死区。

(6) 重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。const和let不允许重复声明变量。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。