从 var 到 let: 一段代码演进的故事

2024-01-10 07:47:09

在 JavaScript 的世界里，变量声明是永恒的话题。从 var 到 let，再到 const，JavaScript 的变量声明方式经历了多次变革，每一种方式都有其独特的特点和适用场景。

var 的诞生

在 JavaScript 的早期版本中，只有 var 一种变量声明方式。var 声明的变量可以被重新赋值，并且作用域是全局的或函数内的。这意味着，在函数内声明的 var 变量可以在函数外访问，而在全局作用域声明的 var 变量可以在任何地方访问。

这种简单的变量声明方式在早期阶段足以满足 JavaScript 的需要。然而，随着 JavaScript 的发展，人们开始意识到 var 的一些局限性。首先，var 声明的变量作用域是全局的或函数内的，这使得变量的管理变得困难。其次，var 允许变量被重新赋值，这可能会导致意想不到的错误。

let 的出现

为了解决 var 的这些局限性，ES6 引入了 let 。let 声明的变量只能在声明所在的块级作用域内访问，并且不能被重新赋值。这使得变量的管理更加容易，也避免了因变量被重新赋值而导致的错误。

let 的出现标志着 JavaScript 变量声明方式的一次重大变革。它使得 JavaScript 的代码更加清晰、易读，也减少了错误的发生。

var 的逐渐淘汰

随着 let 的出现，var 逐渐被淘汰。在新的 JavaScript 代码中，几乎看不到 var 的身影。这并不意味着 var 完全消失，在一些旧的代码中，仍然可以使用 var。但是，在新的代码中，建议使用 let 来声明变量。

一段代码的演变历程

为了更好地理解 var 到 let 的转变，让我们来看一段代码的演变历程。

// var 版本
var a = 10;

function foo() {
  var b = 20;
  console.log(a); // 10
  console.log(b); // 20
}

foo();
console.log(a); // 10
console.log(b); // ReferenceError: b is not defined

这段代码中，变量 a 在全局作用域声明，变量 b 在函数 foo() 内声明。在 var 版本中，变量 a 和 b 都是全局变量，可以在任何地方访问。

// let 版本
let a = 10;

function foo() {
  let b = 20;
  console.log(a); // 10
  console.log(b); // 20
}

foo();
console.log(a); // 10
console.log(b); // ReferenceError: b is not defined