上海省住房与城乡建设厅网站百度服务商
大白话JavaScript闭包在实际项目中有哪些应用场景？
闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中，闭包有很多应用场景，以下是一些常见的例子：
数据封装和隐私保护
- 场景：在开发中，有时希望某些数据只能在特定的函数内部被访问和修改，对外界是隐藏的，就像把一些东西放在一个私密的小房间里，只有特定的方法才能进去操作它们。
- 示例
function createCounter() {// 私有变量，外部无法直接访问let count = 0; return {// 可以访问和修改count的函数increment() { count++;console.log(count);},getCount() { return count;}};
}const counter = createCounter();
counter.increment();
console.log(counter.getCount());
- 解释：在这个例子中，
count变量被封装在createCounter函数内部，通过闭包，increment和getCount函数可以访问和操作count，但外部代码无法直接访问count，实现了数据的封装和隐私保护。
函数柯里化
- 场景：当有一个函数需要接收多个参数，但有时希望先传递一部分参数，然后在后续的操作中再传递剩下的参数，就好像分批处理参数一样。
- 示例
function add(x) {return function(y) {return x + y;};
}const add5 = add(5);
console.log(add5(3));
- 解释：这里的
add函数返回了一个内部函数，内部函数可以访问add函数的参数x，形成了闭包。通过这种方式，可以先固定一个参数，然后再传入另一个参数进行计算，提高了函数的灵活性和复用性。
事件处理函数
- 场景：在网页开发中，给按钮等元素添加点击事件时，常常需要在事件处理函数中保存一些状态信息。
- 示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><button id="btn">点击我</button><script>function createClickHandler(message) {return function() {console.log(message);};}const btn = document.getElementById('btn');// 创建点击事件处理函数，并传入特定的消息const clickHandler = createClickHandler('按钮被点击了！'); btn.addEventListener('click', clickHandler);</script></body></html>
- 解释：
createClickHandler函数返回的事件处理函数通过闭包记住了传入的message参数。当按钮被点击时，就能正确地显示出相应的消息，即使createClickHandler函数已经执行完毕，message参数也不会被释放。
缓存数据
- 场景：在一些需要频繁计算或获取数据的场景中，希望把计算结果或获取到的数据缓存起来，下次需要时直接使用，避免重复计算或请求。
- 示例
function dataFetcher() {// 用于缓存数据的对象let cache = {}; return function(url) {if (cache[url]) {// 如果数据已经在缓存中，直接返回缓存中的数据return cache[url]; } else {// 假设这里是实际的网络请求获取数据const data = fetchDataFromServer(url); // 将获取到的数据存入缓存cache[url] = data; return data;}};
}const fetchData = dataFetcher();
const data1 = fetchData('https://example.com/api/data1');
const data2 = fetchData('https://example.com/api/data2');
const data1Again = fetchData('https://example.com/api/data1'); function fetchDataFromServer(url) {// 这里模拟从服务器获取数据console.log(`从服务器获取数据：${url}`);return `模拟数据：${url}`;
}
- 解释：
dataFetcher函数内部创建了一个cache对象来缓存数据，返回的函数通过闭包可以访问和操作cache。当多次请求相同的url时，第二次及以后就可以直接从缓存中获取数据，提高了性能。