前端校招面试高频考点：JavaScript闭包与作用域链深度解析

在前端校招面试中，闭包和 作用域链 几乎是必考的知识点。不少面试官会从“什么是闭包”开始，一路追问到“闭包的内存泄漏如何避免”“闭包在实际开发中有哪些经典应用”。本文将带你从底层原理到面试实战，彻底攻克这一核心难点。

一、作用域链与闭包的形成原理

1. 词法作用域与执行上下文

JavaScript 采用 词法作用域（静态作用域），即函数的作用域在定义时就已经确定，而非执行时。每一个函数执行时都会创建一个“执行上下文”（Execution Context），其中包含变量对象（Variable Object）、作用域链（Scope Chain）和 this 指向。

function outer() {let a = 10;function inner() {console.log(a); // 10}inner();
}
outer();

上述代码中，inner 函数定义在 outer 内部，因此它的作用域链包含 inner 自身的变量对象 + outer 的变量对象 + 全局变量对象。当 inner 访问 a 时，沿着作用域链向上查找，最终在 outer 中找到 a。

2. 闭包的本质

当 一个内部函数被返回并保存到外部，且它引用了外部函数的变量 时，就产生了闭包。闭包使得外部函数的变量对象不会被销毁，即使外部函数已经执行完毕。

function createCounter() {let count = 0;return function() {count++;return count;};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

这里 createCounter 返回的匿名函数仍然持有对 count 的引用，因此 count 一直驻留在内存中。这就是闭包的核心：函数 + 其引用的自由变量的组合。

二、前端校招面试中闭包的常见考题与陷阱

1. 经典 for 循环与 setTimeout 问题

面试官最喜欢出的一道题：使用 var 声明循环变量时，为什么输出全是最后一个值？

for (var i = 0; i < 5; i++) {setTimeout(function() {console.log(i); // 输出 5 次 5}, 100);
}

因为 var 没有块级作用域，所有 setTimeout 的回调函数共享同一个 i，循环结束后 i 变为 5，所以全部打印 5。解决方案：使用闭包保存每次循环的 i 值，或者改用 let。

// 闭包方案
for (var i = 0; i < 5; i++) {(function(j) {setTimeout(function() {console.log(j);}, 100);})(i);
}// let 方案（ES6）
for (let i = 0; i < 5; i++) {setTimeout(function() {console.log(i);}, 100);
}

2. 闭包与内存泄漏的平衡

闭包虽然强大，但也会导致变量无法被正常回收，造成 内存泄漏。在前端校招面试中，面试官常会问：“如何在不影响功能的前提下合理释放闭包占用的内存？”

最佳实践是：在闭包不再需要时，将引用的变量置为 null，或者直接解除对返回函数的引用。

function createLargeClosure() {let largeData = new Array(1000000).fill('data');let privateVar = 'secret';return function() {console.log(privateVar);};
}
let closureFn = createLargeClosure();
// 使用完后，释放闭包
closureFn = null;
// 此时 largeData 和 privateVar 均可被垃圾回收

3. 闭包在模块化开发中的典型应用

现代前端开发中，闭包广泛用于 创建私有变量和模块模式。例如实现一个简单的计数器模块：

const CounterModule = (function() {let _count = 0; // 私有变量return {increment() { _count++; },decrement() { _count--; },getCount() { return _count; }};
})();CounterModule.increment();
console.log(CounterModule.getCount()); // 1
// 无法直接访问 _count

这种模式保证了内部状态不被外部随意篡改，是构建大型应用的基础。面试中若能结合模块化设计思想回答，会极大加分。

4. 闭包与高阶函数

高阶函数（如 debounce、throttle、curry）的实现也依赖闭包。例如一个防抖函数：

function debounce(fn, delay) {let timer = null;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};
}

闭包 timer 保存了定时器 ID，每次调用都会重置。这种“返回函数 + 保存状态”的模式正是闭包的精髓。