大白话JavaScript闭包在实际项目中有哪些应用场景?

embedded/2025/2/27 12:36:48/

大白话JavaScript闭包在实际项目中有哪些应用场景?

闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中,闭包有很多应用场景,以下是一些常见的例子:

数据封装和隐私保护

  • 场景:在开发中,有时希望某些数据只能在特定的函数内部被访问和修改,对外界是隐藏的,就像把一些东西放在一个私密的小房间里,只有特定的方法才能进去操作它们。
  • 示例
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 函数内部,通过闭包,incrementgetCount 函数可以访问和操作 count,但外部代码无法直接访问 count,实现了数据的封装和隐私保护。

函数柯里化

  • 场景:当有一个函数需要接收多个参数,但有时希望先传递一部分参数,然后在后续的操作中再传递剩下的参数,就好像分批处理参数一样。
  • 示例
javascript">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>javascript">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 参数也不会被释放。

缓存数据

  • 场景:在一些需要频繁计算或获取数据的场景中,希望把计算结果或获取到的数据缓存起来,下次需要时直接使用,避免重复计算或请求。
  • 示例
javascript">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 时,第二次及以后就可以直接从缓存中获取数据,提高了性能。

http://www.ppmy.cn/embedded/167527.html

相关文章

CSS 真的会阻塞文档解析吗?

在网页开发领域&#xff0c;一个常见的疑问是 CSS 是否会阻塞文档解析。理解这一问题对于优化网页性能、提升用户体验至关重要。要深入解答这个问题&#xff0c;需要从浏览器渲染网页的原理说起。 浏览器渲染网页的基本流程 浏览器在接收到 HTML 文档后&#xff0c;会依次进行…

单线服务器和双线服务器分别是指什么?

服务器双线和单线通常是指服务器的网络连接方式&#xff0c;单线服务器是指只有一条物理线路连接到服务器的服务器&#xff0c;成本上较为低廉&#xff0c;更加便于用户和企业进行管理与维护&#xff0c;适合对网络延迟度要求不高的小型网站和低流量的应用&#xff0c;但是当服…

苹果折叠屏iPhone突破折痕难题 或将在2026年发布

&#xff08;2025年2月26日&#xff09;据供应链最新消息&#xff0c;苹果联合三星与美国安费诺公司&#xff0c;在折叠屏核心技术上取得重大突破&#xff0c;首款折叠屏iPhone样品已接近理想水平&#xff0c;最快将于2026年底上市。 屏幕采用三星供应的内折OLED柔性屏&#x…

Gtest 框架缺点

gtest&#xff08;Google Test&#xff09;是 Google 开发的 C 单元测试框架&#xff0c;广泛应用于 C 项目的测试中。尽管它功能强大且灵活&#xff0c;但也存在一些缺点和局限性。以下是 gtest 的主要缺点&#xff1a; 1. 配置和集成复杂 问题&#xff1a;gtest 的配置和集成…

单片机病房呼叫系统设计

摘要&#xff1a;一般来说&#xff0c;病房呼叫系统是方便于病人患者与医护人员灵活沟通的一种呼叫系统&#xff0c;是解决医护人员与病人患者之间信息反馈的一种手段。病床呼叫系统的好坏直接关系到病人患者的生命安危&#xff0c;像今年的新冠型肺炎&#xff0c;没有一个灵活…

Vue 项目中配置代理的必要性与实现指南

Vue 项目中配置代理的必要性与实现指南 在 Vue 前端项目的开发过程中&#xff0c;前端与后端地址通常不同&#xff0c;可能引发跨域问题。为了在开发环境下顺畅地请求后端接口&#xff0c;常常会通过配置**代理&#xff08;proxy&#xff09;**来解决问题。这篇文章将详细解析…

WebGPU驱动的下一代Web图形引擎:突破浏览器计算性能瓶颈

引言&#xff1a;浏览器图形计算的效能革命 Epic Games首次在浏览器端实现虚幻引擎5核心模块&#xff0c;通过WebGPU将Lumen全局光照的渲染耗时从WebGL的896ms降至47ms。在512核GPU并行测试中&#xff0c;WebGPU的通用计算性能较WebGL Compute Shader提升65倍。基于此技术&…

机器学习数学基础:32.复本信度

复本信度&#xff08;Parallel - Forms Reliability&#xff09;深度详解教程 专为小白打造&#xff0c;零基础也能轻松掌握 一、深度解读复本信度 复本信度&#xff0c;也被称为“平行测验信度”&#xff0c;其核心要义是借助两个虽然不同但在各方面等效的测验版本&#xff…