当前位置：首页 > web >正文

闭包（Closure)及其作用和影响

web 2025/5/4 8:59:39

一、闭包是什么

闭包（Closure）指的是一个函数能够记住并访问其词法作用域（lexical scope），即使该函数在其词法作用域之外执行。换句话说，闭包让函数可以“记住”它被创建时的环境。

闭包的核心特点

函数嵌套：闭包通常涉及嵌套函数（一个函数内部定义另一个函数）。
内部函数引用外部变量：内部函数引用了外部函数的变量。
外部函数执行完毕后：即使外部函数已经执行完毕，内部函数仍然可以访问外部函数的变量（因为这些变量被“保存”在内存中）。

示例

解释：

outer() 执行后返回 inner 函数，并赋值给 counter。
即使 outer() 已经执行完毕，count 仍然存在于内存中（因为 inner 函数引用了它）。
每次调用 counter() 时，count 都会递增，说明闭包“记住”了 count 的值。
外部如果需要闭包的变量，则需要 return 。如这里的 return inner；

function outer() {let count = 0; // 外部函数的变量function inner() {count++; // 内部函数引用外部变量console.log(count);}return inner; // 返回内部函数
}const counter = outer(); // outer() 执行完毕，但 count 仍然被保留
counter(); // 1（count 被记住）
counter(); // 2（count 继续累加）
counter(); // 3

二、闭包的作用及使用场景

1.数据私有化（封装私有变量）

闭包可以创建私有变量，避免全局污染。

①普通形式

外部可以访问到变量，不安全

②闭包形式

function createCounter() {let count = 0; // 私有变量return {increment: function() { count++; },decrement: function() { count--; },getCount: function() { return count; }};
}const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined（无法直接访问 count）

2.函数工厂（动态生成函数）

闭包可以用于创建具有特定行为的函数。

适用场景：动态生成不同倍数的乘法函数、事件处理器等。

function makeMultiplier(multiplier) {return function(num) {return num * multiplier;};
}const double = makeMultiplier(2);
const triple = makeMultiplier(3);console.log(double(5)); // 10
console.log(triple(5)); // 15
// 与函数柯里化相似

3.事件监听、回调函数

闭包常用于异步编程（如事件监听、setTimeout），确保回调函数能访问外部变量。

适用场景：事件绑定、AJAX 回调、Promise 链式调用等。

function delayedGreeting(name) {setTimeout(function() {console.log(`Hello, ${name}!`);}, 1000);
}delayedGreeting("Alice"); // 1秒后输出 "Hello, Alice!"

4.防抖和节流

闭包常用于实现防抖和节流，控制函数执行频率。

适用场景：搜索框输入优化、滚动事件节流、按钮防重复点击。

// 防抖：延迟执行，直到停止触发
function debounce(fn, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, args), delay);};
}window.addEventListener("resize", debounce(() => {console.log("Window resized!");
}, 300));

三、闭包的副作用

1. 内存泄漏

闭包会长期持有外部变量，导致内存无法释放（如未清理的 DOM 引用）。

function createHeavyClosure() {const largeData = new Array(1000000).fill("data");return function() {console.log(largeData.length); // 即使不再需要 largeData，它仍然被引用};
}
const closure = createHeavyClosure();
// 如果不再需要 closure，但未手动解除引用，largeData 会一直占用内存

2. `this` 绑定问题

闭包中的 this 可能指向全局对象（非严格模式）或 undefined（严格模式）。

const obj = {name: "Alice",getName: function() {return function() {console.log(this.name); // 错误！this 指向全局对象（非严格模式）};}
};
obj.getName()(); // undefined

3. 性能影响

闭包会增加内存消耗，因为外部函数的变量不会被垃圾回收（GC），直到闭包不再被引用。

四、副作用解决办法（处理闭包带来的内存泄漏问题）

1. 手动解除引用

如果闭包不再需要，手动将其置为 null，让垃圾回收器回收内存。

let closure = (function() {let largeData = new Array(1000000).fill("data");return function() {console.log(largeData.length);};
})();closure(); // 使用闭包
closure = null; // 手动解除引用，释放内存

2. 避免不必要的闭包

在不需要闭包的场景，尽量使用普通函数。

// 不推荐（闭包）
function createClosure() {let data = "some data";return function() { console.log(data); };
}// 推荐（直接返回数据）
function getData() {return "some data";
}

3.注意事件监听的清理

在组件销毁时，移除事件监听器

function setupEvent() {const button = document.querySelector("button");function handleClick() {console.log("Clicked!");}button.addEventListener("click", handleClick);// 在不需要时移除监听return () => button.removeEventListener("click", handleClick);
}const cleanup = setupEvent();
// 当不再需要时调用 cleanup()
cleanup();