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

闭包的定义和应用场景

news 2025/7/19 17:57:19

一、闭包是什么？

闭包是指函数可以“记住”并访问它定义时的词法作用域，即使这个函数在其作用域链之外执行。
简单说：函数 A 在函数 B 中被定义，并在函数 B 外部被调用，它依然能访问函数 B 中的变量，这就是闭包。

示例：

function outer() {let count = 0;return function inner() {count++;console.log(count);};
}const counter = outer();  // outer 执行，返回 inner
counter(); // 1
counter(); // 2

counter 是 inner 函数。
虽然 outer 已经执行完毕，但 inner 仍能访问 outer 中的变量 count。
因为 JS 引擎保留了 outer 的词法作用域 —— 这就是闭包。

二、闭包的核心特性

函数嵌套函数
内部函数引用了外部函数的变量
外部函数执行后，其内部作用域仍被保留

三、常见的闭包封装类型

1. 封装私有变量

避免全局污染，创建私有作用域，保护变量不被外部修改。

示例：

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

2. 防抖函数（Debounce）

控制函数的执行频率，避免频繁触发（如搜索输入框）

示例：

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

实际应用场景：

搜索输入联想（autocomplete）
- 描述：用户输入关键词时，实时发送接口请求搜索建议；
- 问题：用户每打一个字就触发请求，接口压力大；
- 防抖：用户停止输入一段时间（如 300ms）后再发起请求。

<input type="text" oninput="debounceSearch(event)">const debounceSearch = debounce((e) => {searchAPI(e.target.value);
}, 300);

窗口大小调整（resize）事件
- 描述：监听 window.onresize 调整布局；
- 问题：调整过程中会疯狂触发；
- 防抖：等用户停止调整再触发逻辑。

window.addEventListener('resize', debounce(() => {updateLayout();
}, 200));

表单校验（输入完成后校验）
- 输入过程中不断校验字段太频繁；
- 防抖校验：等用户停止输入后再校验格式/是否重复。

3. 节流函数（Throttle）

限制函数在某段时间内只执行一次，常用于滚动/resize等事件。

示例：

function throttle(fn, delay) {let lastTime = 0;return function (...args) {const now = Date.now();if (now - lastTime > delay) {fn.apply(this, args);lastTime = now;}};
}

实际应用场景：

页面滚动事件（scroll）
- 描述：滚动时触发监听函数，计算位置、懒加载、吸顶等；
- 问题：滚动过程中触发频繁，影响性能；
- 节流：限制函数每隔 100ms 触发一次。

window.addEventListener('scroll', throttle(() => {checkLoadMore();
}, 100));

按钮点击防止重复提交
- 描述：用户频繁点击“提交”按钮；
- 节流：按钮点击1秒内只能触发一次。

<button onclick="throttleSubmit()">提交</button>const throttleSubmit = throttle(() => {submitForm();
}, 1000);

拖拽事件
- 拖动一个 DOM 元素时，mousemove 触发频繁；
- 节流避免频繁 DOM 操作。

防抖和节流小结

技术	关键词	作用
防抖（debounce）	最后一次	等用户停止操作一段时间后再执行
节流（throttle）	每隔一次	控制函数在一定时间内最多执行一次

4. 缓存函数（记忆函数）

对重复计算进行缓存优化（如递归计算斐波那契数）

示例：

function memoize(fn) {const cache = {};return function (key) {if (cache[key] !== undefined) {return cache[key];}const result = fn(key);cache[key] = result;return result;};
}const fib = memoize(function(n) {console.log("计算 fib(" + n + ")");if (n <= 1) return n;return fib(n - 1) + fib(n - 2);
});console.log(fib(5)); // 会打印很多“计算 fib(n)”
console.log(fib(5)); // 这次会直接用缓存，打印很少

5. 单例模式封装

只创建一次实例（如弹窗、全局组件）

示例：

function getSingleton(fn) {let instance;return function (...args) {if (!instance) {instance = fn.apply(this, args);}return instance;};
}const createDialog = getSingleton(() => {const div = document.createElement('div');div.innerHTML = '我是弹窗';document.body.appendChild(div);return div;
});

第一次调用：instance 为 undefined，会执行 fn，并把返回值保存在 instance 中；
后续调用：直接返回第一次的 instance，不再执行 fn。

6. 柯里化函数（Currying）

把接受多个参数的函数，转换成一系列接受单个参数的函数。

示例：

function curry(fn) {return function curried(...args) {if (args.length >= fn.length) {return fn(...args);}return function (...next) {return curried(...args, ...next);};};
}function add(a, b, c) {return a + b + c;
}const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 也可以，输出 6
console.log(curriedAdd(1)(2, 3)); // 也可以，输出 6

7. 工厂函数（封装状态）

用于组件、模块创建，管理状态

示例：

function createUser(name) {let _name = name;return {getName() {return _name;},setName(newName) {_name = newName;}};
}const user = createUser('77');
console.log(user.getName()); // 77
user.setName('88');
console.log(user.getName()); // 88

8. 延迟计算 / 延迟执行

按需执行逻辑，提高性能或解决作用域问题

示例：

function lazy(fn) {let cached = null;return function () {if (cached === null) {cached = fn();}return cached;};
}const getConfig = lazy(() => {console.log('读取配置...');return { env: 'prod' };
});getConfig(); // 读取配置... 
getConfig(); // （不再重复执行）