块级作用域（Block Scope）：`let` 与 `const` 的引入

好的，各位观众老爷们，大家好！我是你们的老朋友，bug 终结者、代码美容师——程序猿阿Q。今天，咱们要聊一个非常重要，但又经常被大家忽略的话题：块级作用域 (Block Scope)，以及 let 和 const 这两位重量级选手的登场。

准备好了吗？让我们一起坐上时光机，回到 JavaScript 的世界，看看作用域的故事是如何演变的！

第一幕：作用域的“前世今生”——var 的独角戏

很久很久以前（其实也没多久，也就十几年），在 JavaScript 的世界里，作用域的定义方式非常简单粗暴，就像一位拿着大喇叭的老村长，嗓门大到整个村子都能听到。那时候，只有函数作用域和全局作用域两种。

用 var 声明的变量，要么是全局变量，要么是函数内部的局部变量。这意味着什么呢？意味着你在 if 语句，for 循环里用 var 声明的变量，会像脱缰的野马一样，跑到整个函数里“撒野”，造成各种意想不到的 bug。

举个栗子🌰：

function 老村长的广播() {
  var 村民 = "张三"; // 老村长宣布：村民是张三

  if (true) {
    var 村民 = "李四"; // 老村长又宣布：村民是李四！
    console.log("在村委会里，村民是：" + 村民); // 输出：在村委会里，村民是：李四
  }

  console.log("整个村子，村民是：" + 村民); // 输出：整个村子，村民是：李四
}

老村长的广播();

你看，老村长本来想在村委会里宣布一下新的村民代表，结果这一宣布，整个村子的村民都变成李四了！这可咋整？村民们肯定不乐意啊！

这种现象，我们称之为 变量提升 (Variable Hoisting)。var 声明的变量，会提升到函数作用域的顶部，即使你在声明之前使用它，也不会报错，而是得到 undefined。这就像一位健忘的老村长，总是先念叨着村民的名字，然后才想起来这个人是谁。

这种机制，在很多情况下会导致代码难以理解和维护，尤其是在复杂的代码逻辑中，很容易出现意料之外的错误。

第二幕：英雄登场——let 和 const 的横空出世

正当大家对 var 的“任性”感到头疼不已时，两位英雄——let 和 const 横空出世，带来了块级作用域的概念，彻底改变了 JavaScript 的作用域规则。

let 和 const 就像两位训练有素的士兵，只在自己所属的“阵地”（也就是代码块）里活动，不会跑到其他地方“捣乱”。代码块指的是由一对花括号 {} 包裹的代码区域，例如 if 语句、for 循环、while 循环等等。

let：灵活多变的战士

let 声明的变量，只在声明它的代码块内有效。这意味着，你可以放心地在不同的代码块中使用相同的变量名，而不用担心它们会互相影响。

我们再来看看上面的例子，用 let 来改造一下：
```
function 新村长的广播() {
  let 村民 = "张三"; // 新村长宣布：村民是张三

  if (true) {
    let 村民 = "李四"; // 新村长在村委会里宣布：村民是李四！
    console.log("在村委会里，村民是：" + 村民); // 输出：在村委会里，村民是：李四
  }

  console.log("整个村子，村民是：" + 村民); // 输出：整个村子，村民是：张三
}

新村长的广播();
```
这下好了，新村长在村委会里宣布的村民代表，不会影响到整个村子的村民了。每个人都各司其职，和谐共处。

let 还有一个重要的特性，就是它不会进行变量提升。这意味着，你必须先声明变量，才能使用它，否则会报错。这就像一位严谨的士兵，必须先拿到武器，才能上战场。
const：坚定不移的卫士

const 声明的变量，也只在声明它的代码块内有效，而且还有一个更重要的特性：一旦声明，就不能再修改了。const 就像一位忠诚的卫士，一旦守护了自己的领地，就绝不会轻易改变。
```
const PI = 3.1415926;
// PI = 3.14; // 报错：Assignment to constant variable.
```
const 非常适合用来声明那些在程序运行过程中不会改变的常量，例如圆周率、配置参数等等。使用 const 可以提高代码的可读性和可维护性，让其他人更容易理解你的代码意图。

第三幕：块级作用域的优势——代码的“净化器”

块级作用域的引入，带来了诸多好处，就像给代码安装了一个“净化器”，让代码更加清晰、安全、可靠。

避免变量污染：块级作用域可以有效地避免变量污染，防止不同代码块之间的变量互相干扰。这就像给每个代码块都划分了独立的“房间”，让它们可以自由地玩耍，而不会影响到其他人。
提高代码可读性：块级作用域可以使代码结构更加清晰，更容易理解。你可以清楚地知道一个变量的作用范围，而不用担心它会跑到其他地方“捣乱”。
减少 bug 产生：块级作用域可以减少 bug 的产生，提高代码的可靠性。由于变量的作用范围更加明确，你可以更容易地发现和修复错误。
更容易进行代码重构：块级作用域使得代码重构更加容易。你可以放心地修改一个代码块中的变量，而不用担心它会影响到其他代码块。

第四幕：let、const 与 var 的比较——三剑客的“华山论剑”

为了让大家更清楚地了解 let、const 和 var 的区别，我们来一场“华山论剑”，看看它们各自的优缺点。

特性	`var`	`let`	`const`
作用域	函数作用域/全局作用域	块级作用域	块级作用域
变量提升	有	无	无
可重复声明	可以	不可以	不可以
可修改	可以	可以	不可以

从上表可以看出，let 和 const 在很多方面都优于 var。因此，在现代 JavaScript 开发中，我们应该尽量避免使用 var，而选择使用 let 和 const。

第五幕：最佳实践——代码的“葵花宝典”

掌握了 let 和 const 的用法，并不意味着你就能写出高质量的 JavaScript 代码。要想真正发挥它们的威力，还需要遵循一些最佳实践。

优先使用 const：如果变量的值在声明后不会改变，那么应该优先使用 const。这可以提高代码的可读性和可维护性，让其他人更容易理解你的代码意图。
只在需要修改时使用 let：只有当变量的值需要在声明后修改时，才应该使用 let。
尽量缩小变量的作用范围：尽量将变量的作用范围限制在最小的范围内。这可以避免变量污染，提高代码的可读性和可维护性。
养成良好的代码风格：养成良好的代码风格，例如使用有意义的变量名、添加必要的注释等等。这可以使你的代码更加易于理解和维护。

第六幕：实战演练——代码的“变形金刚”

光说不练假把式，下面我们来几个实战演练，看看 let 和 const 在实际开发中的应用。

循环中的变量声明
```
for (let i = 0; i < 10; i++) {
  // 在循环内部，i 的作用范围只在这个循环体中
  console.log(i);
}

// console.log(i); // 报错：i is not defined
```
如果使用 var 声明 i，那么 i 的作用范围会扩大到整个函数，导致在循环外部也可以访问到 i，这可能会导致意想不到的错误。

闭包中的变量捕获

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 输出：1
console.log(counter1()); // 输出：2
console.log(counter2()); // 输出：1
console.log(counter2()); // 输出：2

在这个例子中，let 声明的 count 变量被闭包捕获，每个 counter 函数都有自己独立的 count 变量，互不影响。如果使用 var 声明 count，那么所有的 counter 函数都会共享同一个 count 变量，导致结果出错。

模块化开发

let 和 const 可以帮助我们更好地进行模块化开发。我们可以将代码分成多个模块，每个模块都有自己的作用域，避免变量污染。

第七幕：总结与展望——代码的“未来战士”

今天，我们一起回顾了 JavaScript 作用域的发展历程，学习了 let 和 const 的用法，以及块级作用域的优势。let 和 const 的引入，极大地改善了 JavaScript 的代码质量，提高了开发效率。

随着 JavaScript 的不断发展，作用域的概念也在不断演变。未来，我们可能会看到更多新的作用域特性，让我们的代码更加清晰、安全、可靠。

希望今天的分享对大家有所帮助。记住，选择合适的变量声明方式，就像选择合适的武器一样，可以让你在代码的世界里披荆斩棘，所向披靡！

好了，各位观众老爷们，今天的节目就到这里。感谢大家的观看，我们下期再见！ 👋

额外补充：一些容易混淆的点，以及更深入的思考

const 声明的对象/数组可以修改吗？

这是一个非常容易混淆的点。const 声明的变量，只是保证变量指向的内存地址不变，而不能保证该内存地址存储的数据不变。
```
const person = { name: "张三", age: 30 };
person.age = 35; // 这是允许的，因为 person 指向的内存地址没有改变
console.log(person); // 输出：{ name: "张三", age: 35 }

// person = { name: "李四", age: 40 }; // 报错：Assignment to constant variable.
```
这意味着，你可以修改 const 声明的对象/数组的属性，但不能将 const 变量重新赋值为另一个对象/数组。
TDZ (Temporal Dead Zone)——时间死区

let 和 const 声明的变量，在声明之前访问，会报错 ReferenceError: Cannot access 'variable' before initialization。这是因为 let 和 const 声明的变量存在 TDZ，也就是时间死区。

在变量声明之前，该变量处于 “未初始化” 状态，不能被访问。这可以防止一些意外的错误，例如在变量声明之前错误地使用了该变量。

window 对象和全局作用域

在浏览器环境中，var 声明的全局变量，会自动成为 window 对象的属性。而 let 和 const 声明的全局变量，不会成为 window 对象的属性。

var globalVar = "我是全局变量（var）";
let globalLet = "我是全局变量（let）";
const globalConst = "我是全局变量（const）";

console.log(window.globalVar); // 输出：我是全局变量（var）
console.log(window.globalLet); // 输出：undefined
console.log(window.globalConst); // 输出：undefined

这意味着，使用 let 和 const 可以更好地避免全局变量污染，提高代码的安全性。

代码风格工具 (ESLint, Prettier) 的作用

代码风格工具可以帮助我们自动检查代码中的错误，并强制执行一致的代码风格。例如，ESLint 可以检查是否使用了 var，并建议使用 let 或 const。Prettier 可以自动格式化代码，使代码更加易于阅读和维护。

使用代码风格工具可以提高代码质量，减少 bug 的产生，并提高团队协作效率。
更深入的思考：函数式编程与作用域

在函数式编程中，我们通常会避免使用可变状态，而是倾向于使用不可变数据。const 可以帮助我们更好地实现不可变数据，提高代码的可靠性和可维护性。

此外，函数式编程还强调纯函数 (Pure Function) 的概念。纯函数是指那些没有副作用，且只依赖于输入参数的函数。纯函数更容易测试和调试，因为它们的行为是可预测的。

总而言之，理解作用域的概念，掌握 let 和 const 的用法，并遵循最佳实践，是成为一名优秀的 JavaScript 开发者的必备技能。希望大家能够不断学习和实践，写出更加优雅、高效、可靠的 JavaScript 代码！

发表回复 取消回复

发表回复取消回复