一、闭包是什么？

闭包是指函数可以“记住”并访问它定义时的词法作用域，即使这个函数在其作用域链之外执行。
简单说：函数 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. 函数嵌套函数
2. 内部函数引用了外部函数的变量
3. 外部函数执行后，其内部作用域仍被保留

三、常见的闭包封装类型

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);};
}

实际应用场景：

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

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

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

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

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

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;}};
}

实际应用场景：

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

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

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

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

3. 拖拽事件
   • 拖动一个 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(); // （不再重复执行）

四、闭包的注意事项

• 内存泄漏风险：闭包会长期保留作用域链，如果引用过多变量未释放，可能导致内存问题。
• 调试难度稍高：变量作用域不明显时，排查问题可能会变复杂。