彻底搞懂JavaScript块级作用域与函数作用域：var、let、const的核心区别
在JavaScript中，作用域是控制变量访问权限的核心机制，直接影响代码的安全性、可维护性甚至运行结果。尤其是ES6引入块级作用域后，var、let、const三者的作用域差异成为前端面试和日常开发的高频考点。从基础概念出发，彻底理清函数作用域与块级作用域的区别，以及不同声明关键字的用法边界。
一、先搞懂：什么是函数作用域？（ES5及之前的核心作用域）
在ES6之前，JavaScript中只有两种作用域：全局作用域和函数作用域。其中函数作用域是核心，它的核心规则是：var声明的变量，作用域被限制在包含它的函数内部，在整个函数体内都有效，不受内部代码块（如if、for花括号）的限制。
1.1 函数作用域的直观示例
function foo() { if (true) { var x = 10; // 用var声明变量 } console.log(x); // 10，正常输出 } foo(); console.log(x); // 报错：x is not defined从示例能看出：
- 变量
x虽然在if代码块内声明，但作用域覆盖整个foo函数，所以在if外部、函数内部依然能访问。 - 函数外部无法访问
x，因为var被函数作用域限制，超出函数则失去访问权限。
1.2 函数作用域的“坑”：变量提升
函数作用域的另一个典型特征是var声明的变量会发生“变量提升”——变量声明被提升到函数或全局作用域的顶部，且默认初始化为undefined，这常常导致意外的bug。
function test() { console.log(x); // undefined（变量提升导致此处不报错） if (true) { var x = 5; // 声明被提升到函数顶部，赋值保留在原地 } } test();如果不理解变量提升，很容易误以为console.log(x)会报错，但实际上var x已经被提升到函数顶部，只是尚未赋值，所以输出undefined。
二、ES6新特性：块级作用域的诞生
ES6（ECMAScript 2015）为了解决var带来的变量污染、作用域模糊等问题，正式引入了块级作用域。其核心规则是：变量的作用域被限制在最近的一对花括号{}内（如if、for、while代码块或独立花括号块），外部无法访问。
实现块级作用域的核心关键字就是：let和const。
2.1 块级作用域的直观示例
// 独立代码块 { let a = 10; const b = 20; console.log(a); // 10，块内正常访问 console.log(b); // 20，块内正常访问 } console.log(a); // 报错：a is not defined console.log(b); // 报错：b is not defined // if代码块 if (true) { let y = 20; } console.log(y); // 报错：y is not defined从示例能清晰看出：let、const声明的变量，严格被限制在花括号{}内部，超出这个块就失去访问权限，这就是块级作用域的核心特性。
2.2 为什么说var没有块级作用域？
这是var与let/const的核心区别之一：var声明的变量不会被花括号{}限制，只会被函数作用域或全局作用域限制。用一个对比示例更直观理解：
if (true) { var a = 1; // var声明，不受块级限制 let b = 2; // let声明，受块级限制 } console.log(a); // 1，正常输出（全局作用域可访问） console.log(b); // 报错：b is not defined如果没有函数包裹，var a的作用域就是全局，即使在if块内声明，外部依然能访问；而let b被块级作用域限制，外部无法访问。
三、核心对比：var vs let/const 全维度差异
除了作用域差异，var与let/const在变量提升、重复声明等方面也有显著区别，整理成表格一目了然：
| 特性 | var | let / const |
|---|---|---|
| 作用域 | 函数作用域 或 全局作用域 | 块级作用域（花括号{}限制） |
| 变量提升 | 有，声明提升到作用域顶部，初始化为 undefined | 有声明提升，但不初始化（进入暂时性死区，访问报错） |
| 重复声明 | 允许（同一作用域内可重复声明同一变量） | 不允许（同一作用域内重复声明会报错） |
| 常量限制 | 无（声明后可任意修改值） | const 声明的变量不可修改（引用类型仅限制引用地址），let 可修改 |
关键补充：暂时性死区（TDZ）
对于let/const的“声明提升但不初始化”，需要特别理解暂时性死区：从作用域开始到变量声明语句之前，该变量处于“死区”，任何访问都会报错。
if (true) { console.log(y); // 报错：Cannot access 'y' before initialization let y = 20; // 声明语句之前为暂时性死区 }四、块级作用域的实际应用：解决哪些问题？
块级作用域的引入，不仅规范了变量作用域，还解决了很多ES5时代的“坑”，最典型的有两个场景：
4.1 避免变量污染全局/外层作用域
在循环、条件判断等代码块中使用let/const，可以避免变量泄漏到外层作用域，减少变量冲突。
// 反面示例：var导致全局污染 for (var i = 0; i < 3; i++) { // 循环逻辑 } console.log(i); // 3（i泄漏到全局作用域） // 正面示例：let限制块级作用域 for (let j = 0; j < 3; j++) { // 循环逻辑 } console.log(j); // 报错：j is not defined（无泄漏）4.2 解决循环中的闭包问题
ES5中用var声明循环变量，由于没有块级作用域，容易导致闭包访问到错误的变量值；而let每次迭代都会创建新的作用域，完美解决这个问题。
// 反面示例：var导致闭包访问错误 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 输出：3 3 3 } // 正面示例：let解决闭包问题 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 输出：0 1 2 }原因：var i是函数/全局作用域，循环中只创建一个变量，定时器回调访问的都是同一个最终值 3；而let i每次迭代都创建新的块级作用域，每个定时器回调访问的是当前迭代的i。
五、总结：开发中该如何选择？
理解了作用域的核心差异后，日常开发的选择原则很简单：
- 优先使用
const：大多数变量声明后不需要修改，用const能明确语义，避免意外修改，提高代码安全性。 - 需要修改的变量用
let：如循环变量、需要重新赋值的变量，用let限制块级作用域，避免污染。 - 坚决不用
var：ES6之后，var的所有功能都能被let/const替代，且var的作用域和变量提升特性容易引发bug，没必要再使用。
最后再梳理核心要点：块级作用域由{}定义，通过let/const实现；var只有函数作用域，无块级限制；合理使用块级作用域能避免变量污染和提升代码可维护性。
