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

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

article 2026/4/4 23:29:01

大白话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 时，第二次及以后就可以直接从缓存中获取数据，提高了性能。

相关文章：

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

大白话JavaScript闭包在实际项目中有哪些应用场景&#xff1f; 闭包是指有权访问另一个函数作用域中的变量的函数。在实际项目中&#xff0c;闭包有很多应用场景&#xff0c;以下是一些常见的例子&#xff1a; 数据封装和隐私保护 场景&#xff1a;在开发中&#xff0c;有时…...

编程日记 2026/3/31 3:55:14

R 语言科研绘图第 27 期 --- 密度图-分组

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2026/4/4 9:04:13

QT各种版本下载安装

参考链接&#xff1a; 【Qt】超详细&#xff01;Qt4.8.6和VS2010的配置及使用 由于QT官网一般现在进不去&#xff0c;所以下载一些QT版本只能通过镜像或者以前下载存储的安装包来进行&#xff0c;现在推荐两种方法 从参考链接中搬过来&#xff1a; 方案一&#xff1a;国内镜…...

编程日记 2026/3/26 18:25:51

信息系统的安全防护

文章目录 引言**1. 物理安全****2. 网络安全****3. 数据安全****4. 身份认证与访问控制****5. 应用安全****6. 日志与监控****7. 人员与管理制度****8. 其他安全措施****9. 安全防护框架**引言 从技术、管理和人员三个方面综合考虑，构建多层次、多维度的安全防护体系。 信息…...

编程日记 2026/4/4 9:03:59

TCPDF 任意文件读取漏洞：隐藏在 PDF 生成背后的危险

在网络安全的世界里&#xff0c;漏洞就像隐藏在黑暗中的“定时炸弹”&#xff0c;稍有不慎就会引发灾难性的后果。今天&#xff0c;我们要聊的是一个与 PDF 生成相关的漏洞——TCPDF 任意文件读取漏洞。这个漏洞可能让攻击者轻松读取服务器上的敏感文件&#xff0c;甚至获取整个…...

编程日记 2025/8/4 13:30:05

如何解决svn st中出现！（冲突）的问题

在 SVN&#xff08;Subversion&#xff09;中&#xff0c;svn status 命令用于查看工作副本的状态。当你看到 ! 符号时&#xff0c;通常表示文件或目录在工作副本中丢失&#xff08;missing&#xff09;。以下是解决这个问题的步骤&#xff1a; 1. 理解 ! 的含义 ! 表示该文件…...

编程日记 2026/3/26 21:34:39

Redis｜复制 REPLICA

文章目录 是什么能干嘛怎么玩案例演示复制原理和工作流程复制的缺点 是什么 官网地址&#xff1a;https://redis.io/docs/management/replication/Redis 复制机制用于将数据从一个主节点&#xff08;Master&#xff09;复制到一个或多个从节点&#xff08;Slave&#xff09;&a…...

编程日记 2026/3/29 12:00:15

水利 2月26日练习

测量前准备 使用数字万用表的蜂鸣器档&#xff0c;可以高速检验电解电容器的质量好坏。测量方法如图5-14所示。将数字万用表拨至蜂鸣器档&#xff0c;用两支表笔区分与被测电容器Cx的两个引脚接触&#xff0c;应能听到一阵急促的蜂鸣声&#xff0c;随即声响中止&#xff0c;同时…...

编程日记 2026/4/4 4:18:11

Windows逆向工程入门之LOOP与REP指令的深度解析

公开视频 -> 链接点击跳转公开课程博客首页 -> ​​​链接点击跳转博客主页 目录 1. LOOP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;循环优化 2. REP 指令 概念 操作过程 用途 示例代码 扩展知识点&#xff1a;条件前缀 3. LOCK 指令 概念…...

编程日记 2026/3/31 0:23:21

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记&#xff1a;[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01&#xff1a;PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程&#xff0c;在 PHP 中&#xff0c;通常使用 serialize() 函数来完成序列化的操作…...

编程日记 2026/3/29 14:18:10

汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例

案例1　2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象　 一辆2008款保时捷卡宴车&#xff0c;搭载4.8 L 自然吸气发动机&#xff0c;累计行驶里程约为21万km。车主反映&#xff0c;该车行驶中发动机偶发熄火&#xff1b;重新起动&#xff0c;发动机能够起动着机&#xff…...

编程日记 2026/4/4 5:51:00

Python游戏编程之赛车游戏6-2

3.2 move()方法的定义 Player类的move()方法用于玩家控制汽车左右移动&#xff0c;当玩家点击键盘上的左右按键时&#xff0c;汽车会相应地进行左右移动。 move()方法的代码如图7所示。 图7 move()方法的代码 其中&#xff0c;第20行代码通过pygame.key.get_pressed()函数获…...

编程日记 2026/3/26 1:43:26

数据安全_笔记系列09_人工智能（AI）与机器学习（ML）在数据安全中的深度应用

数据安全_笔记系列09_人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;在数据安全中的深度应用 人工智能与机器学习技术通过自动化、智能化的数据分析&#xff0c;显著提升了数据分类、威胁检测的精度与效率&#xff0c;尤其在处理非结构化数据、复杂…...

编程日记 2026/2/13 13:06:36

渗透测试【order by盲注实践】

实践环境基于sqli-lab靶场的第46关进行 bool盲注 代码如下&#xff1a; import requests from bs4 import BeautifulSoup# 定义获取用户名的函数&#xff0c;使用 BeautifulSoup 解析 HTML 页面&#xff0c;提取用户名信息 def get_username(resp):soup BeautifulSoup(resp,…...

编程日记 2026/3/26 21:07:42

ROS的action通信——实现阶乘运算（三）

在ROS中除了常见的话题(topic&#xff09;通信、服务(server)通信等方式&#xff0c;还有action通信这一方式&#xff0c;由于可以实时反馈任务完成情况&#xff0c;该通信方式被广泛运用于机器人导航等任务中。本文将通过三个小节的分享&#xff0c;实现基于action通信的阶乘运…...

编程日记 2026/4/2 15:22:37

007：Cesium.ScreenSpaceEventHandler 知识详解，示例代码

查看本专栏目录 - 本文是第 007个API内容详解 vue+cesium 示例教程200+目录 文章目录 一、ScreenSpaceEventHandler 的基本概念初始化 ScreenSpaceEventHandler二、注册事件**常见事件类型**三、注销事件四、示例代码：鼠标移动时显示坐标信息五、示例代码：鼠标左键点击拾取地…...

编程日记 2026/4/3 22:01:12

期权帮|股指期货基差和价差有什么区别？

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 股指期货基差和价差有什么区别&#xff1f; 一、股指期货基差 股指期货基差是指股指期货价格与其对应的现货指数价格之间的差额。 股指期货基差计算公式&#xff1a;基差 现…...

编程日记 2026/3/26 21:10:36

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口

WebSocketHandler 是 Spring Framework 中用于处理 WebSocket 通信的接口&#xff0c;其主要作用是定义了如何处理 WebSocket 的各种事件和消息。以下是 WebSocketHandler 的主要作用和功能&#xff1a; ### 1. 处理 WebSocket 生命周期事件 WebSocketHandler 定义了多个方法来…...

编程日记 2025/7/2 13:05:57

内网渗透测试-Vulnerable Docker靶场

靶场来源&#xff1a; Vulnerable Docker: 1 ~ VulnHub 描述&#xff1a;Down By The Docker 有没有想过在容器中玩 docker 错误配置、权限提升等&#xff1f; 下载此 VM&#xff0c;拿出您的渗透测试帽并开始使用 我们有 2 种模式&#xff1a; - HARD&#xff1a;这需要您将 d…...

编程日记 2026/4/4 1:43:01

一键导出数据库表到Excel

工作中&#xff0c;我们经常需要将数据库表导出到Excel&#xff0c;通常我们会用数据库编辑器之类的工具提供的导出功能来导出&#xff0c;但是它们的导出功能通常都比较简单。 这篇文章将介绍一种简单易用并且功能强大的导出方法。 新增导出 打开的卢导表工具&#xff0c;新…...

编程日记 2026/4/4 5:46:29

2025年电气工程与智能系统国际学术会议（IC2EIS 2025）

重要信息 官网&#xff1a;www.ic2eis.org(点击了解参会投稿等) 时间&#xff1a;2025年3月14-16日 地点&#xff1a;中国河南省郑州市 简介 2025年电气工程与智能系统国际学术会议&#xff08;IC2EIS 2025&#xff09;将于2025年3月14-16日在中国郑州举行。会议旨在为电气…...

编程日记 2026/4/4 3:35:16

Activiti 5 + Spring Boot全流程开发指南

目录 一、环境搭建&#xff08;Spring Boot 2.x&#xff09; 1.1 依赖配置 1.2 配置文件 二、流程定义与部署 2.1 创建BPMN文件&#xff08;leave.bpmn&#xff09; 2.2 流程部署服务 三、流程操作核心实现 3.1 启动流程实例 3.2 查询待办任务 四、审批流程处理 4.1 …...

编程日记 2026/4/4 10:35:09

docker安装etcd:docker离线安装etcd、docker在线安装etcd、etcd镜像下载、etcd配置详解、etcd常用命令、安装常见问题总结

官方网站 官方网址&#xff1a;etcd 二进制包下载&#xff1a;Install | etcd GitHub社区项目&#xff1a;etcd-io GitHub GitHub社区项目版本历史&#xff1a;Releases etcd-io/etcd GitHub 一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令…...

编程日记 2026/3/29 1:44:36

【云安全】云原生-Docker（六）Docker API 未授权访问

Docker API 未授权访问 是一个非常严重的安全漏洞&#xff0c;可能导致严重的安全风险。 什么是 Docker API &#xff1f; Docker API 是 Docker 容器平台提供的一组 RESTful API&#xff0c;用于与 Docker 守护程序进行通信和管理 Docker 容器。通过 Docker API&#xff0c;…...

编程日记 2026/4/1 13:06:06

【人工智能顶刊合集】CCF-A/B/C类推荐所有期刊目录，中科院1区审稿极速，81天录用！

本期盘点【人工智能】领域CCF-A/B/C类中科院1-2区期刊最新影响因子、分区、审稿周期参考&#xff01; CCF-A类 Artificial Intelligence • 影响因子&#xff1a;5.1 • 期刊分区&#xff1a;JCR1区&#xff0c;中科院2区 • 年发文量&#xff1a;126 • 自引率&#xff1…...

编程日记 2026/3/24 4:57:12

C#实战：基于腾讯云大模型知识引擎原子能力提供的文档解析API快速提取图片信息为MD文档

目录 一、大模型知识引擎 LKE介绍 1.1 如何开通服务？ 1.2 大模型知识引擎组成 二、案例实战 2.1、创建项目 2.2、引入腾讯大模型知识引擎 LKE调用SDK依赖库 2.3、代码编写 2.4、界面设计 三、总结 今天借助腾讯云大模型知识引擎原子能力提供的文档解析API快速提取图片…...

编程日记 2026/3/27 5:22:27

第7章_将应用程序与 Keycloak 集成

将应用程序与 Keycloak 集成 到目前为止&#xff0c;您已经了解了 Keycloak 中的主要概念和配置选项。在本章中&#xff0c;您将学习如何应用它们&#xff0c;以便您可以配置您的应用程序并将它们与 Keycloak 集成。 通过选定的集成场景和编码示例&#xff0c;您将根据应用程…...

编程日记 2026/3/31 8:02:32

kotlin的lateinit声明 的变量可能为null吗？

kotlin的lateinit声明 的变量可能为null吗&#xff1f; DeepSeek R1 思考 26 秒 思考过程 嗯&#xff0c;用户问的是Kotlin中的lateinit变量是否可能为null。首先&#xff0c;我需要回顾一下lateinit的作用和特性。lateinit用于延迟初始化一个非空类型的变量&#xff0c;这样…...

编程日记 2026/3/2 8:50:55

千峰React:案例一

做这个案例捏 因为需要用到样式&#xff0c;所以创建一个样式文件&#xff1a; //29_实战.module.css .active{text-decoration:line-through } 然后创建jsx文件&#xff0c;修改main文件&#xff1a;导入Todos&#xff0c;写入Todos组件 import { StrictMode } from react …...

编程日记 2026/4/2 18:47:03

ChatGPT入驻Safari，AI搜索时代加速到来

2月25日&#xff0c;人工智能领域巨头OpenAI宣布了一项重磅更新&#xff1a;为其广受欢迎的ChatGPT应用新增Safari浏览器扩展功能&#xff0c;并支持用户将ChatGPT设置为Safari地址栏的默认搜索引擎。这一举措标志着OpenAI在将ChatGPT整合进用户日常网络浏览体验方面迈出了重要…...

编程日记 2026/3/24 10:46:49