每天一个前端小知识 Day 3 - JavaScript 的作用域与闭包

JavaScript 的作用域与闭包

---

1. 什么是作用域（Scope）？

作用域是变量定义的可访问范围。

分类：

类型	说明
全局作用域	在任何地方都能访问的变量（如浏览器中 window）
函数作用域	函数内部定义的变量只能在函数内部访问
块级作用域（ES6）	使用 let、const 创建的变量，限制在 {} 中

---

示例：

var a = 1; // 全局作用域

function foo() {
  var b = 2; // 函数作用域
  if (true) {
    let c = 3; // 块级作用域
  }
  console.log(c); // ❌ ReferenceError
}

---

2. 变量声明与提升（Hoisting）

变量和函数声明会“提升”到当前作用域顶部，但只有 var 和 function 会提升，let/const 不会。

console.log(a); // undefined（提升了但未赋值）
var a = 10;

console.log(b); // ❌ ReferenceError
let b = 20;

---

3. 什么是闭包（Closure）？

闭包是函数与其词法作用域的组合。

当函数在其定义的作用域外被调用，仍然可以访问其原始作用域中的变量，这就是闭包。

经典面试例题：

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

此处 count 是在外部函数中定义的变量，返回的匿名函数在执行时依旧能访问它。

---

4. 闭包的应用场景

应用场景	示例或说明
数据缓存	利用闭包保存函数状态（如计数器）
模块化开发	封装变量，避免全局污染
函数柯里化	分步传参
防抖/节流函数	闭包保存计时器 ID
创建私有变量	JS 没有真正的私有变量，闭包是替代方案

---

5. 面试常见题目与解答

Q1：如何解释 JavaScript 中的闭包？

答：闭包是函数可以“记住”并访问其定义时的词法作用域，即使这个函数在当前词法作用域之外被调用。

---

Q2：闭包会造成内存泄漏吗？

答：闭包可能会导致不必要的内存占用，因为其引用的外部变量不会被 GC 回收。只要不手动清理引用或及时释放，确实可能造成内存泄漏。

---

Q3：如何使用闭包实现一个 once 函数（只执行一次）？

function once(fn) {
  let called = false;
  return function(...args) {
    if (!called) {
      called = true;
      return fn.apply(this, args);
    }
  };
}

---

Q4：下列代码输出什么？为什么？

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

答：输出 3、3、3
因为 var 没有块级作用域，setTimeout 延迟执行时，i 已变为 3。

✅ 解决方法：使用闭包或 let：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}

---

6. 如何判断是否形成闭包？

• 函数返回了另一个函数；
• 返回的函数访问了外层函数的变量；
• 外层函数执行完毕后，变量仍可访问。

---

7. 实战建议

• 不要滥用闭包，避免难以维护的代码和性能问题；
• 闭包的变量若长期驻留内存，记得手动清除引用；
• 使用现代 JS 特性（如 let, const）更容易控制作用域；
• 推荐搭配调试工具（Chrome DevTools）分析作用域链；

---

✅ 总结

掌握作用域与闭包不仅是写出高质量 JavaScript 的基础，也是面试中区分中高级开发者的关键技能。理解作用域链、变量提升、闭包生命周期，能帮助你更清晰地分析代码执行过程。