JavaScript的闭包是指函数能够记住并访问其词法作用域，即使函数在其词法作用域之外执行。这一特性让闭包在很多实际开发场景中都有重要应用，下面我们结合具体案例来看闭包的常见使用场景。
1. 防抖与节流函数实现
防抖和节流是前端开发中处理高频触发事件的常用方案，两者的核心实现都依赖闭包保存计时器状态。防抖的作用是让函数在事件触发后等待一段时间再执行，如果这段时间内再次触发事件则重新计时；节流则是让函数在固定时间间隔内只执行一次。
下面是防抖函数的实现示例：
// 防抖函数实现
function debounce(fn, delay) {
// 用闭包保存计时器变量，不会被外部直接修改
let timer = null;
return function(...args) {
// 每次触发先清除之前的计时器
if (timer) clearTimeout(timer);
// 重新设置计时器
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 使用示例：输入框搜索防抖
const searchInput = document.querySelector('#search');
const handleSearch = debounce(function(value) {
console.log('搜索内容：', value);
}, 500);
searchInput.addEventListener('input', function(e) {
handleSearch(e.target.value);
});
节流函数的实现同样依赖闭包保存上次执行时间：
// 节流函数实现
function throttle(fn, interval) {
// 闭包保存上次执行的时间戳
let lastTime = 0;
return function(...args) {
const now = Date.now();
// 判断距离上次执行是否超过间隔时间
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
// 使用示例：滚动事件节流
window.addEventListener('scroll', throttle(function() {
console.log('滚动位置：', window.scrollY);
}, 200));
2. 模块化与数据私有化
在ES6模块出现之前，JavaScript没有原生的模块化方案，闭包是实现模块化和数据私有化的重要手段。通过立即执行函数表达式（IIFE）创建闭包，可以让内部变量和函数不被外部直接访问，只暴露需要公开的接口。
下面是一个简单的模块示例：
// 使用闭包实现模块，内部变量和函数默认私有
const userModule = (function() {
// 私有变量，外部无法直接访问
let userName = '默认用户';
let userId = 1001;
// 私有函数，外部无法直接调用
function checkId(id) {
return typeof id === 'number' && id > 0;
}
// 暴露公共接口
return {
getUserName() {
return userName;
},
setUserName(name) {
if (typeof name === 'string' && name.trim()) {
userName = name.trim();
}
},
updateUserId(id) {
if (checkId(id)) {
userId = id;
return true;
}
return false;
},
getUserId() {
return userId;
}
};
})();
// 外部使用模块
console.log(userModule.getUserName()); // 输出：默认用户
userModule.setUserName('张三');
console.log(userModule.getUserName()); // 输出：张三
// 无法直接访问私有变量userName和userId
console.log(userModule.userName); // 输出：undefined
3. 函数工厂
闭包可以用来创建函数工厂，生成具有相似逻辑但参数不同的函数。比如我们需要创建多个不同倍数的乘法函数，就可以通过闭包保存倍数参数，生成对应的函数。
函数工厂的实现示例如下：
// 函数工厂，生成指定倍数的乘法函数
function createMultiplier(multiplier) {
// 闭包保存传入的倍数参数
return function(num) {
return num * multiplier;
};
}
// 生成不同倍数的函数
const double = createMultiplier(2);
const triple = createMultiplier(3);
const fiveTimes = createMultiplier(5);
console.log(double(5)); // 输出：10
console.log(triple(5)); // 输出：15
console.log(fiveTimes(5)); // 输出：25
4. 循环中的事件绑定
在ES6的let关键字出现之前，使用var声明变量时，循环中绑定事件经常会遇到变量共享的问题，闭包可以解决这个问题。即使在ES6之后，闭包在循环场景下的应用依然有参考价值。
下面是使用闭包解决循环事件绑定问题的示例：
// 假设页面有3个按钮，点击需要输出对应的索引
const buttons = document.querySelectorAll('button');
// 错误写法：使用var声明i，点击所有按钮都会输出3
// for (var i = 0; i < buttons.length; i++) {
// buttons[i].addEventListener('click', function() {
// console.log(i);
// });
// }
// 使用闭包解决：每次循环创建一个闭包保存当前的i值
for (var i = 0; i < buttons.length; i++) {
(function(index) {
buttons[i].addEventListener('click', function() {
console.log(index);
});
})(i);
}
5. 缓存计算结果
对于计算成本较高的函数，我们可以使用闭包保存计算结果，下次调用时如果参数相同直接返回缓存结果，避免重复计算，提升性能。这种模式也被称为记忆化。
缓存计算的实现示例如下：
// 带缓存的斐波那契数列计算函数
function createFibonacciCalculator() {
// 闭包保存缓存对象
const cache = {};
function fibonacci(n) {
// 如果缓存中有结果直接返回
if (cache[n] !== undefined) {
return cache[n];
}
// 计算并缓存结果
if (n <= 1) {
cache[n] = n;
return n;
}
const result = fibonacci(n - 1) + fibonacci(n - 2);
cache[n] = result;
return result;
}
return fibonacci;
}
const fib = createFibonacciCalculator();
console.log(fib(10)); // 第一次计算，输出：55
console.log(fib(10)); // 直接返回缓存结果，输出：55
闭包使用的注意事项
虽然闭包有很多实用场景，但过度使用闭包可能会导致内存泄漏，因为闭包会持有外部作用域的引用，让相关变量无法被垃圾回收机制回收。如果闭包不再使用，建议手动将引用设为null，释放内存。另外，闭包会让代码的逻辑变得更复杂，使用时需要做好注释，提升代码的可维护性。
JavaScript闭包函数作用域模块化数据私有化修改时间：2026-07-16 16:36:32