JavaScript作用域与闭包原理：GC垃圾回收与变量提升深度实践

脚本专家

在JavaScript开发中，作用域、垃圾回收（GC）和闭包是进阶阶段必须掌握的核心概念。它们不仅影响代码的执行效率，还直接关系到内存管理和模块化设计。本文通过具体案例，拆解这些机制的底层原理，帮助开发者夯实前端基础。

一、作用域：变量访问的边界
作用域规定了变量可被访问的范围。JavaScript中的作用域分为局部作用域和全局作用域。

1. 局部作用域
局部作用域又细分为函数作用域和块作用域。

函数作用域：在函数内部声明的变量只能在函数内部访问。函数参数也属于函数内部的局部变量。不同函数之间的变量无法互相访问。函数执行完毕后，其内部的局部变量会被自动清空。

2. function getSum() {
3.   const num = 10;
4. }
5. console.log(num); // 报错：num is not defined

复制代码

块作用域：由大括号 {} 包裹的代码块形成块作用域。使用 let 或 const 声明的变量受块作用域限制，而 var 声明的变量不会。不同代码块之间的变量无法互相访问。

2. for (let t = 1; t <= 6; t++) {
3.   console.log(t); // 正常
4. }
5. console.log(t); // 报错：t is not defined

复制代码

2. 全局作用域
在 script 标签或 .js 文件的最外层声明的变量属于全局作用域。全局变量在任何其他作用域（包括函数内部）都可以被访问。

2. const num = 10;
3. function fn() {
4.   console.log(num); // 10
5. }

复制代码

注意：为 window 对象动态添加的属性默认也是全局的，但强烈不推荐使用。函数中省略关键字声明的变量会成为全局变量，同样需要避免。应尽可能减少全局变量的数量，防止全局命名空间被污染。

二、作用域链：变量查找机制
当函数被执行时，JavaScript 引擎会按照作用域链的规则查找变量：优先从当前函数作用域开始，如果找不到，则逐级向上查找父级作用域，直到全局作用域。

2. let a = 1;
3. let b = 2;
4. function f() {
5.   let a = 1;
6.   function g() {
7.     a = 2;
8.     console.log(a); // 2
9.   }
10.   g();
11. }
12. f();

复制代码

总结：
- 嵌套关系的作用域串联起来形成作用域链。
- 查找变量时遵循从小到大的规则（从内层到外层）。
- 子作用域可以访问父作用域，但父作用域无法访问子作用域。

三、垃圾回收机制（GC）
JavaScript 的内存分配和回收是自动完成的。内存的生命周期包括三个阶段：分配（声明变量、函数、对象时）、使用（读写内存）、回收（垃圾回收器自动回收不再使用的内存）。

全局变量通常不会回收（关闭页面时才回收），局部变量在不使用后会被自动回收。如果内存无法被释放，就会导致内存泄漏。

GC 的常见算法：
- 引用计数法：记录每个对象被引用的次数，引用数为 0 时回收。缺点是无法处理循环引用，例如两个对象相互引用，导致引用数永远不会归零，造成内存泄漏。IE 早期版本采用此算法。

2. function fn() {
3.   let o1 = {};
4.   let o2 = {};
5.   o1.a = o2;
6.   o2.a = o1;
7.   return '循环引用，引用计数无法回收';
8. }
9. fn();

复制代码

- 标记清除法：从根对象（全局对象）出发，定期扫描所有可达的对象。无法从根触及的对象会被标记为“不再使用”，随后回收。该算法解决了循环引用问题，是现代浏览器的标准实现。

四、闭包：内层函数 + 外层变量
闭包是指一个函数对其周围状态的引用捆绑在一起，使得内层函数可以访问外层函数的变量。简单理解，闭包 = 内层函数 + 外层函数的变量。

2. function outer() {
3.   const a = 1;
4.   function f() {
5.     console.log(a);
6.   }
7.   f();
8. }
9. outer();

复制代码

闭包的一个典型应用是实现数据的私有化。例如，统计函数被调用的次数：

2. let count = 1;
3. function fn() {
4.   count++;
5.   console.log(`函数被调用${count}次`);
6. }
7. fn(); // 2
8. fn(); // 3

复制代码

这种实现中 count 是全局变量，容易被外部修改。通过闭包可以将其私有化：

2. function fn() {
3.   let count = 1;
4.   function fun() {
5.     count++;
6.     console.log(`函数被调用${count}次`);
7.   }
8.   return fun;
9. }
10. const result = fn();
11. result(); // 2
12. result(); // 3

复制代码

这样外部无法直接修改 count，实现了数据私有。

五、变量提升
变量提升是 JavaScript 中一种特殊行为：使用 var 声明的变量，可以在声明之前被访问，但值为 undefined。let 和 const 则不存在变量提升，如果在声明前访问会报 ReferenceError。

2. console.log(str + 'world!'); // undefinedworld!
3. var str = 'hello ';

复制代码

注意：变量提升仅在相同作用域内有效。实际开发中，应始终先声明再访问变量，避免依赖变量提升特性。

总结
理解作用域、作用域链、GC 垃圾回收、闭包和变量提升，是掌握 JavaScript 底层逻辑的关键。合理利用局部作用域和闭包可以保护数据，注意垃圾回收避免内存泄漏，同时养成先声明后使用的编码习惯。这些基础概念将直接提升代码质量和运行性能。

热心网友7

楼主写得很详细，把作用域、GC 和闭包这几个关键概念都拆解清楚了。特别是闭包实现数据私有化的那个例子，简单直观，对新手很友好。我补充一点：变量提升其实可以结合函数声明来理解——函数声明会整体提升，而 var 只提升声明不提升赋值，所以实际开发中还是建议用 let/const 统一声明，减少意外。楼主有没有遇到过闭包导致内存泄漏的具体场景？比如 DOM 事件绑定了闭包但没及时解绑，想听听你的实战经验。