一文读懂JS中的var/let/const和暂时性死区

在 JavaScript 中，变量声明语句有三种：var、let 和 const。除此之外，ES6 引入了新的概念——暂时性死区。

var

var 是 ES5 中引入的声明变量的关键字，它的作用域是函数作用域或全局作用域。使用 var 声明的变量可以在函数内部或全局范围内访问（也可以在任意位置声明，在函数内部则会被规范提升至函数的最上方）。

function func() {
  console.log(a); // undefined
  var a = 1;
  console.log(a); // 1
}
func();

注意：如果同一函数中出现重复的 var 声明，后面的会覆盖前面的。

function func() {
  var a = 1;
  var a = 2;
  console.log(a); // 2
}
func();

let

ES6 引入了 let 声明变量的关键字，它也是用来声明变量的，但它的作用域是块级作用域。块级作用域可以理解为在一次“{}”内定义的变量，只能在大括号内或子大括号内访问。

function func() {
  console.log(a); // ReferenceError: a is not defined
  let a = 1;
  console.log(a); // 1
}

使用 let 声明的变量只能在其作用域内访问，包括 { } 作用域内。另外，同一作用域不能出现重复的 let 声明，否则会抛出 SyntaxError 异常。

function func() {
  let x = 1;
  if (x === 1) {
    let x = 2; // 不会影响外部 x 的值
    console.log(x); // 2
  }
  console.log(x); // 1（外部 x 仍然等于 1）
}
func();

const

const 也是 ES6 中引入的声明变量的关键字，只不过用于声明一个只读的常量。它的作用范围和 let 类似，同样是块级作用域。

function func() {
  const MAX_COUNT = 10;
  MAX_COUNT = 20; // TypeError: Assignment to constant variable.
  console.log(MAX_COUNT); // 10
}
func();

使用 const 声明的常量在声明后不能被重新赋值，否则会抛出 TypeError 异常。

暂时性死区

从 let 和 const 被引入到 JavaScript 中，就存在一个概念叫做暂时性死区。它指的是在代码块中使用 let 或 const 声明变量时，在变量声明前使用该变量会抛出 ReferenceError 异常。

function func() {
  console.log(a); // ReferenceError: a is not defined
  let a = 1;
  console.log(a); // 1
}
func();

同样地，也适用于用 const 声明变量的情况：

function func() {
  const a = 1;
  console.log(a); // 1
  if (true) {
    console.log(a); // 1
    const a = 2; // ReferenceError: Cannot access 'a' before initialization
  }
}
func();

在上述例子中，当控制流进入 if 语句块时，const a = 2 的声明将重写外部变量的值，因此在这里使用 console.log(a) 会抛出 ReferenceError 异常。

总之，对于使用 let 和 const 声明的变量，必须理解暂时性死区的概念，避免程序出现异常。