变量声明的灵魂拷问：var、let 和 const 的背后故事

2023-09-30 12:26:45

JavaScript 变量声明的演变：从 var 到 let 再到 const

了解变量声明和范围

为了理解 var、let 和 const 之间的区别，我们首先需要了解 JavaScript 中的变量声明和范围。变量声明是创建变量的过程，该变量可以存储值。变量的作用域是指变量可用的代码部分。

var：变量声明的起点

var 是 JavaScript 中用于声明变量的传统方法。使用 var 声明的变量具有函数作用域，这意味着它们在声明它们的函数中可用。不过，需要注意的是，var 变量有一个称为“变量提升”的怪异行为。变量提升是指在执行代码之前，所有 var 变量都提升到当前作用域的顶部。这可能导致一些意外行为，因为变量在声明之前就可以使用。

let：变量声明的新时代

为了解决 var 变量提升的问题，ES6 中引入了 let。let 声明的变量具有块级作用域，这意味着它们仅在声明它们的代码块中可用。例如，如果在一个函数中声明一个 let 变量，那么它将仅在该函数中可用，而不能在函数外部使用。let 变量没有提升的行为，这意味着在声明之前无法使用它们。

const：常量声明的诞生

const 是 ES6 中引入的另一个，用于声明常量。常量一旦声明就不可更改。const 变量具有块级作用域，这意味着它们仅在声明它们的代码块中可用。const 变量也没有提升的行为，这意味着在声明之前无法使用它们。

比较时刻：var、let 和 const 的异同

现在，我们已经了解了 var、let 和 const 的基本知识，让我们比较一下它们的异同：

特性	var	let	const
作用域	函数级	块级	块级
提升	是	否	否
可变性	可变	可变	不可变

举个例子：代码对比

// 使用 var 声明的变量
var x = 10;

// 在函数内声明一个 var 变量
function myFunction() {
  var y = 20;

  // 在函数内访问 var 变量
  console.log(y); // 输出：20

  // 在函数外访问 var 变量
  console.log(x); // 输出：10
}

// 调用函数
myFunction();

// 在函数外访问 var 变量
console.log(x); // 输出：10


// 使用 let 声明的变量
let a = 10;

// 在函数内声明一个 let 变量
function myFunction() {
  let b = 20;

  // 在函数内访问 let 变量
  console.log(b); // 输出：20

  // 在函数外访问 let 变量
  console.log(a); // 输出：10
}

// 调用函数
myFunction();

// 在函数外访问 let 变量
console.log(a); // 输出：10


// 使用 const 声明的常量
const c = 10;

// 在函数内声明一个 const 常量
function myFunction() {
  const d = 20;

  // 在函数内访问 const 常量
  console.log(d); // 输出：20

  // 在函数外访问 const 常量
  console.log(c); // 输出：10
}

// 调用函数
myFunction();

// 在函数外访问 const 常量
console.log(c); // 输出：10