JavaScript中的var、let和const：详解这个"地狱三重奏"（附TypeScript提示）

正在为JavaScript变量而烦恼的开发者们！你是否曾经在团队会议中为使用var、let还是const而困惑？别担心，让我们一起轻松愉快地解决这个问题。我们将探索每个关键字，比较它们的作用域（全局、函数、块级），讨论提升（JavaScript的一个有点神奇的特性），提供一些实用的例子，最后还会涉及一些TypeScript的内容。准备好了吗？让我们开始吧！

var关键字：不可预测的"老前辈"

让我们从var开始，这是JavaScript变量中的"老前辈"。如果JavaScript是一部剧，var就是那个有点老派、不可预测但又有趣的角色。在ES5之前，我们只能用var来声明变量。虽然现在仍然可以使用它，但要注意：它有一些可能会让你惊讶的特性。

var的特点

• var的作用域：用var声明的变量被限制在包含它的函数内（如果在函数外声明则是全局的）。它忽略块级作用域（if、for等）。简单来说，在块内声明的var变量，只要在同一个函数内，在块外仍然可以访问。
• 允许重复声明：使用var，你可以在同一个作用域内多次声明同一个变量而不会报错。例如：var x = 1; var x = 2;不会触发错误——JavaScript只会用第二个值覆盖第一个值。这在旧代码中很方便，但在新代码中应该避免，因为它可能导致混乱。

让我们用一个小例子来说明var过大的作用域：

javascript

是的，即使这个fruit是在if语句中声明的，块外的console.log仍然可以毫无问题地访问它。var不在乎块级边界：它要么是全局的，要么属于包含它的函数，仅此而已。

最后，让我们谈谈提升（hoisting）。在中文中我们有时称之为"提升"，但说实话，我们主要使用hoisting这个术语。这是var倾向于在其作用域顶部悄悄声明的特性。JavaScript在执行时，会表现得好像所有的var声明都被"提升"到了函数的顶部。因此，你可以在声明行之前使用变量...不过会得到一个有点奇怪的值。我们稍后在提升部分会详细讨论这个问题（剧透：var喜欢用undefined来让你惊讶）。

总的来说，var为我们提供了很好的服务，但它有一些狡猾的特性：过大的作用域、静默的重复声明、不可预测的提升...我们可以做得更好，幸运的是，ES6引入了新的关键字来整理这一切！

let关键字：行为良好的新变量

2015年，JavaScript迎来了let（以及const）。这时，我们得到了变量声明的小升级。let就像一个酷酷的、守规矩的年轻人：它修正了var的大部分怪癖，同时保持了灵活性。

let的特点

• let的作用域：用let声明的变量被限制在定义它的块内。块就是 { ... } 之间的任何代码——无论是函数、if语句、for循环等。如果在块内声明一个let变量，它在块外就不存在了。终于有了秩序！变量再也不会未经允许就从if语句或循环中逃出来了。
• 不允许重复声明：与var不同，你不能在同一个作用域内重复声明同一个let变量。如果你尝试在同一块内写 let x = 1; let x = 2;，你会得到一个漂亮的 SyntaxError: Identifier 'x' has already been declared 错误。这避免了很多混乱。

让我们把var换成let，清楚地看看作用域的区别：

javascript

使用let，一旦离开if语句的大括号，就结束了。vegetable变量不再被定义。尝试访问它：ReferenceError。这就是let强制执行良好作用域行为的方式。

那么提升呢？let（和const）变量也会被提升，但方式不同。它们在声明前不能使用。从技术上讲，JS引擎知道这个块中有变量（它预留了内存），但在声明行执行之前，任何访问尝试都会触发错误。我们说这些变量处于暂时性死区（是的，听起来像恐怖电影，但这只是"初始化前不可访问"的时髦说法）。我们稍后会详细讨论这个行为，但请记住let不会让你过早地使用变量。

在实践中，let已经成为需要随时间变化的变量的默认选择。它带来了清晰性（块级作用域）和安全性（没有意外的重复声明，没有声明前的访问）。简单来说，let是你声明临时或可变变量的新朋友。

const关键字：安全的赌注（但不是冻结）

接下来是const！与let同时引入，这个关键字创建常量...或者说几乎是这样。它创建的是引用不会改变的变量。const具有与let相同的块级作用域（不再有var到处游荡）和相同的提升规则（直到声明前的暂时性死区）。最大的区别是，一旦初始化，变量就不能被重新赋值。

const的特点

• 必须初始化：使用const时，你必须在声明时给出一个值。没有选择。const x; 单独使用是不行的（直接SyntaxError）。你必须写 const x = 42; 这样的形式。
• 不能重新赋值：一旦常量被定义，就没有办法在之后给它一个新值。如果尝试这样做，你会在运行时得到一个错误（TypeError，提示"assignment to constant variable"）。值被固定了...嗯，引用被固定了。
• 块级作用域且不能重复声明：与let一样，const变量存在于声明它的块内，你不能在同一作用域内重复声明同一个名字。很整洁。

让我们看一个小例子来清楚地展示与可变变量的区别：

javascript

我们将PI定义为常量，只要不试图改变它，就可以毫无问题地使用它。当我们尝试PI = 3.15时，JavaScript立即阻止了我们：常量不能被修改。

注意：常量并不意味着100%不可变。如果值是对象或数组，你仍然可以修改对象/数组的内部。不能改变的是变量本身（内存中的引用）。例如：

javascript

在这里，尽管使用了const，我们仍然可以更改user对象中的name。但是，完全将user重新赋值为另一个对象是不允许的。所以，const = 常量，不可修改，但仅限于变量本身。不要混淆变量的常量性和值的不变性。

javascript

对于数组也是同样的逻辑：你可以修改其内容（添加、删除、修改元素），但不能将fruits变量重新赋值为一个新数组。把数组想象成一个盒子：你可以改变里面的内容，但不能替换盒子本身。

在实践中，const最适合那些不应该改变的值：比如配置、引用等。它被广泛使用，使代码更加健壮（我们知道这个变量不会改变）。实际上，最佳实践建议默认使用const，只有在知道值需要改变时才切换到let。至于var...嗯，除非有特殊原因，让我们忘记它吧 😉。

变量的作用域：全局、函数还是块级？

让我们更多地讨论作用域。作用域决定了变量在代码中"哪里"可以访问。JavaScript主要有三个作用域级别：

作用域类型

• 全局作用域：当变量在任何函数外声明时（在主脚本或控制台中），它就是全局的。然后它可以在任何地方访问（在任何函数或块内）。⚠️ 注意，在模块外，全局var会成为全局对象的属性（如浏览器中的window），而let和const创建"干净"的全局变量（不附加到window）。在ES6模块中，顶层变量完全不会泄漏到全局对象。
• 函数作用域：这是在函数内创建的作用域。在函数内声明的var变量只在该函数内可见（以及其可能的子函数）。从外部看不到它。在函数内声明的let和const也是如此：它们保持在该函数的局部作用域内。
• 块级作用域：这是限制在 { ... } 分隔的块内的作用域（例如if语句、for循环、while循环内，或简单的独立块）。let和const是块级作用域的，只能在定义它们的块内访问（以及其子块）。而var没有块级作用域：它的引用块是包含它的函数（如果没有函数则是全局）。

总结：var被限制在函数（或全局）内，而let和const被限制在当前块内。这个区别解决了很多经典问题。例如：

javascript

这里，使用var的循环在外部留下了i，值为3。而使用let的循环在结束时清理了j：之后无法访问。实际上，这意味着你可以在不同的块中使用相同名称的let变量，它们不会相互干扰，而单个var会在这些块之间共享。

提升：JavaScript玩捉迷藏的时候

让我们谈谈提升。这个声明提升机制经常是混乱的源头（以及会议中的笑话）。提升是JavaScript引擎在执行过程中将变量和函数声明"移动"到它们的作用域顶部的行为。实际上，代码中并没有真正移动什么，这只是JavaScript在执行前预先为变量分配内存。

提升的行为

• 对于var：声明被提升并默认初始化为undefined。因此，你可以在声明行之前使用var变量。它已经存在了（在实际赋值到达之前具有undefined值）。这是语言的合法行为，但如果不注意，可能会导致相当棘手的bug。
• 对于let和const：声明也会被提升（引擎知道这个块中有变量），但没有默认初始化。变量被放在暂时性死区中，直到声明行被执行。实际上，这意味着如果你在实际声明之前尝试读取或使用这个变量，JavaScript会抛出错误（ReferenceError）。换句话说，变量在理论上存在，但在其声明/初始化被执行之前无法访问。

让我们在实践中测试提升：

javascript

在第一个console.log时，myVar变量已经通过提升在内存中创建，但其默认值是undefined（因为我们还没有赋值）。没有错误，只是显示undefined。然后我们赋值"你好"，第二次得到预期的值。

让我们看看let：

javascript

这里，第一个console.log触发ReferenceError。为什么？因为myLet被提升但没有初始化。它在暂时性死区中，无法访问。JavaScript拒绝给我们一个还不真正存在的值。当我们执行 let myLet = "你好"; 时，变量离开暂时性死区并获得"你好"。第二个console.log完美工作。

可以清楚地看到：var像忍者一样提升声明并悄悄地给自己undefined值，而let/const采取安全措施，防止在初始化之前使用。教训：避免依赖提升来编码，这是大脑打结（和意外undefined）的配方。最好在作用域顶部声明变量，保持代码整洁。如果忘记了，let/const的行为会用错误提醒你，而var会让你在undefined中挣扎。

啊，顺便说一下，注意传统的函数声明（function myFunction() \{ ... \}）也会被完全提升。你可以在代码后面调用声明的函数，JavaScript已经知道它了。但是，箭头函数或赋值给变量的函数表达式会根据使用的关键字遵循var/let的提升规则（这是另一天的话题 😉）。

TypeScript小插曲：更清晰

在结束之前，让我们简单谈谈TypeScript。当你开始使用TypeScript（为JavaScript添加静态类型的超集）时，你会遇到我们的三个朋友var、let和const。好消息：它们的作用域和提升行为与纯JavaScript完全相同，因为TypeScript被编译成标准JavaScript。但是，TypeScript在类型方面有自己的特色，特别是对于let和const，值得一看。

TypeScript和变量

• 类型推断：TypeScript根据初始值推断变量的类型。如果你写 let fruit = "苹果";，TypeScript会推断fruit是string类型。如果你写 let age = 25;，它会理解age是数字。对于let，它相当宽泛：变量可以改变，所以类型是基本类型（string、number等）。
• 常量和字面量类型：有趣的是，使用const时，TypeScript会推断字面量类型。换句话说，因为值是常量，TS可以说"这个变量的类型就是这个确切的值"。例如：

typescript

color变量是"红色"类型，而不仅仅是string。好处？如果稍后代码期望精确的"红色"或"蓝色"值（例如，只接受这些颜色之一的参数），如果你有 const color = "红色"，你可以毫无顾虑地传递它。使用 let color = "红色"（宽泛的string类型），TypeScript会抱怨，因为"红色"只是所有字符串中的一个可能性。简单来说，TypeScript的const在有用时允许超精确的类型定义。这就像是一个强化常量概念的奖励。

• 相同的纪律：TypeScript鼓励像ES6一样使用let和const。实际上，大多数TypeScript项目完全禁止var（甚至有linter规则）。如果你尝试在声明前使用变量，TypeScript会在编译时大喊——远在JavaScript运行时之前。例如，如果你在TypeScript代码中写 console.log(myVar); var myVar = 3;，它会指出你有作用域或顺序问题。对于过早使用let也是如此，TS知道提升规则，会尽可能保护你避免错误。

总结一下，TypeScript不会改变var/let/const的基本规则，但会用类型系统的安全网来加强它们。你获得清晰性，更早地捕获错误。记住，特别是TypeScript的const是双重胜利：不可重新赋值的变量和精确的字面量类型——还能要求什么呢？

结论：如何选择而不出错

我们已经涵盖了所有内容。那么，var vs let vs const的胜者是谁？毫不奇怪：在2025年，let & const组合在编写清晰和可维护的代码方面大获全胜。这里有一些实用的建议：

最佳实践

• 尽可能使用const：对于不需要改变值的变量，const是你最好的朋友。它阻止重新赋值，并向所有人（包括6个月后的你自己）清楚地表明这个值不会改变。非常适合配置、固定引用等。
• 如果需要改变值，使用let：需要增加计数器、累积结果或存储可变中间值吗？let就是为此而生的。它提供良好的行为（块级作用域，没有意外的提升陷阱），并给你改变值的灵活性。
• 除非特殊情况，避免var：老实说，var几乎可以从你的日常词汇中消失了。它为了向后兼容和一些特定场景而存在，但在现代代码中不太流行。如果你在处理旧项目或需要有意操作全局作用域（通常应该避免的事情），好吧，var可能会露面。否则，把它放在JavaScript遗物博物馆里吧 😄。
• 有疑问时解释：如果有一天你使用var，在会议中被问到为什么，要有好的理由并解释（例如，"我需要全局声明这个变量以便旧脚本可以访问它"）。但是，99%的时间，你不需要这种体操：let和const会毫无问题地覆盖所有需求。

现在你知道在JavaScript中何时使用var、let或const，甚至对TypeScript中的行为也有了一些了解。不再混淆我们的三个朋友，也不会在代码审查中因为毫无理由地使用var而被取笑。去平静地编码吧，记住：尽可能使用const，只在必要时使用let，而var...越少越好！编码愉快！

1if (true) {
2  var fruit = '苹果';
3}
4console.log(fruit); // '苹果' – var轻松地跳出了块级作用域！

1if (true) {
2  let vegetable = '胡萝卜';
3}
4console.log(vegetable); // ReferenceError: vegetable is not defined (let变量在块外不存在)

1const PI = 3.14;
2console.log(PI); // 3.14
3PI = 3.15; // TypeError: Assignment to constant variable.

1const user = { name: 'Alice' };
2user.name = 'Bob'; // ✅ 修改对象的属性，这是允许的
3user = { name: 'Eve' }; // ❌ TypeError: 试图重新赋值user变量

1const fruits = ['苹果', '香蕉'];
2fruits.push('橙子'); // ✅ 向数组添加元素，这是允许的
3fruits[0] = '梨'; // ✅ 修改现有元素，这是允许的
4fruits.pop(); // ✅ 删除最后一个元素，这是允许的
5fruits = ['猕猴桃', '芒果']; // ❌ TypeError: 试图重新赋值fruits变量

1for (var i = 0; i < 3; i++) {
2  // 使用var的循环
3}
4console.log(i); // 3 – 变量i在循环后仍然存在（for不限制作用域）
5
6for (let j = 0; j < 3; j++) {
7  // 使用let的循环
8}
9console.log(j); // ReferenceError: j is not defined (j在循环块外不存在)

1console.log(myVar); // undefined，变量已经存在（提升）但还没有值
2var myVar = '你好';
3console.log(myVar); // "你好"

1console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
2let myLet = '你好';
3console.log(myLet); // "你好"

1const color = '红色';
2let fruit = '苹果';
3// 这里，TypeScript推断：
4// - color: 类型 "红色"（字符串字面量）
5// - fruit: 类型 string（经典，可变的）