深入理解 JavaScript 变量声明

在 JavaScript 中，变量声明是编程的基础。随着 ES6 的引入，JavaScript 提供了三种主要的变量声明方式：var、let 和 const。虽然它们都可以用来声明变量，但它们之间存在一些重要的区别。

一、变量声明关键字汇总

在 JavaScript 中，一共有三种声明变量的方式：

• var
• let
• const

这三种方式的存在主要是由于历史原因。最初，JavaScript 中只有 var 用于声明变量，但为了更好地解决作用域问题，ES6 引入了 let 和 const。

二、作用域

（一）全局作用域和函数作用域

在 ES5 中，作用域主要有两种：全局作用域和函数作用域。全局作用域中的变量可以在整个程序中访问，而函数作用域中的变量只能在函数内部访问。

// 全局作用域
var a = 10;

function checkScope() {
  // 函数作用域
  var b = 20;
  console.log(a); // 10
  console.log(b); // 20
}

checkScope();
console.log(b); // ReferenceError: b is not defined

（二）块级作用域

ES6 引入了块级作用域，由 {} 包裹的代码块形成一个独立的作用域。if 语句和 for 语句中的 {} 也属于块级作用域。

{
  // 块级作用域
  let a = 10;
}
console.log(a); // ReferenceError: a is not defined

三、var 关键字

（一）没有块级作用域

var 声明的变量不存在块级作用域的概念。在块级作用域中声明的变量仍然可以在外部访问。

{
  var a = 10;
}
console.log(a); // 10

（二）存在变量提升

var 声明的变量会提升到其作用域的顶部，但不会提升赋值。

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

（三）全局作用域中的变量挂载到 window 对象

在全局作用域中用 var 声明的变量会挂载到 window 对象。

var a = 10;
console.log(a); // 10
console.log(window.a); // 10

（四）允许重复声明

在同一个作用域中，var 允许重复声明变量。

var a = 10;
var a = 20;
console.log(a); // 20

四、let 关键字

（一）块级作用域

let 声明的变量具有块级作用域，不能在块外部访问。

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

（二）不存在变量提升

let 声明的变量不会被提升到块的顶部。

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 10;

（三）暂时性死区

在块级作用域中，let 声明的变量在声明之前是不可访问的，这段区域被称为暂时性死区。

{
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 10;
}

（四）不允许重复声明

在同一个块级作用域中，let 不允许重复声明变量。

let a = 10;
let a = 20; // SyntaxError: Identifier 'a' has already been declared

五、const 关键字

（一）块级作用域

const 声明的变量也具有块级作用域。

{
  const a = 10;
}
console.log(a); // ReferenceError: a is not defined

（二）必须立即初始化

const 声明的变量必须在声明时初始化。

const a; // SyntaxError: Missing initializer in const declaration

（三）值不能改变

const 声明的变量值不能被改变。

const a = 10;
a = 20; // TypeError: Assignment to constant variable

六、总结

var、let 和 const 是 JavaScript 中三种主要的变量声明方式。虽然它们都可以用来声明变量，但它们在作用域、变量提升、重复声明等方面存在显著差异。在实际开发中，建议优先使用 let 和 const，因为它们提供了更好的块级作用域支持和更严格的变量管理规则。