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

谈谈闭包和闭包使用场景

news 2026/4/25 6:45:45

一、什么是闭包

概念：闭包还是作用域的一种特殊应用

二、触发闭包的情况

1.函数当做返回值被返回

2.函数当做参数被传递

3.自执行匿名函数

//情况1：函数当做返回值被返回
function fn(){const a = 1;return function(){console.log(a)   //1};
}
const a = 5;
const cb = fn();
cb();//会在定义的最近的上一层寻找
//情况2：函数当做参数传递
function fn(cb){const a = 100;cb()
}const a = 500;
fn(function(){console.log(a);  //500
});//在定义的最近的外一层寻找
//情况3：自执行匿名函数
(function(index){console.log(index);  //10
})(10);

三、闭包的应用

1.隐藏变量

2.解决for i 的问题

 

 我们想要实现点击第一个button出现0，点击第二个出现1，依次类推

使用自执行函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>0</button><button>1</button><button>2</button><button>3</button><button>4</button>
</body>
<script>const aBtn = document.getElementsByTagName("button")for(var i = 0; i < aBtn.length;i++){(function(index){aBtn[i].onclick = function(){console.log(index)}})(i)}
</script>
</html>

公司中是这么写的，因为let是块级作用域，每次执行i都会保存起来 

 const aBtn = document.getElementsByTagName("button")for(let i = 0; i < aBtn.length;i++){aBtn[i].onclick = function(){console.log(i)}}

 

相关文章：

谈谈闭包和闭包使用场景

一、什么是闭包 概念&#xff1a;闭包还是作用域的一种特殊应用 二、触发闭包的情况 1.函数当做返回值被返回 2.函数当做参数被传递 3.自执行匿名函数 //情况1&#xff1a;函数当做返回值被返回 function fn(){const a 1;return function(){console.log(a) //1}; } const a …...

编程日记 2023/8/12 13:17:26

MATLAB算法实战应用案例精讲-【图像处理】边界框锚框

目录 目标检测 应用场景 目标检测发展历程 常用数据集 边界框（bounding box）...

编程日记 2023/8/12 13:16:25

04什么场景要用到微服务

一句话导读 根据微服务的特点&#xff0c;可以总结为在构建复杂的、大型的、分布式的、高可用、高并发、高性能的应用时可以使用微服务架构。 目录 一句话导读 一、微服务适用场景 1.业务复杂&#xff0c;模块多且相对独立 2.团队多&#xff0c;管理隔离 3.应用规模大&#…...

编程日记 2023/8/12 13:15:23

.NET SqlSuger 简单介绍，超快开发数据库

文章目录 前言SqlSugar使用我的环境Nuget 安装新建连接串DB First 和 Code First使用增删改查 总结 前言 我之前介绍过EFCore 怎么使用Nuget快速创建数据库&#xff0c;我之后发现SqlSugar更快。这里简单再说一下SqlSugar如何使用 .NET Core 数据库DB First自动生成&#xff0…...

编程日记 2023/8/12 13:14:22

SpringBoot复习：（28）【前后端不分离】自定义View

一、自定义View package cn.edu.tju.view;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.stereotype.Comp…...

编程日记 2023/8/12 13:13:21

springcloud3 springcloud stream的学习以及案例（了解）

一 springcloud stream的作用 1.1 springcloud stream作用 stream屏蔽底层消息中间件的差异&#xff0c;降低切换成本&#xff0c;统一消息的编程模型。 stream中的消息通信模式遵循了“发布-订阅”模式。 1.2 Binder作用 通过定义绑定器Binder作为中间层&#xff0c;实现…...

编程日记 2023/8/12 13:12:18

Kotlin理解内置函数

目录 一 内置函数1.1 apply 函数1.2 let 函数1.3 run函数1.4 with函数1.5 also函数1.6 takeIf函数1.7 takeUnless函数1.8 总结 Kotlin内置函数包括&#xff1a;let、run、with、apply、also&#xff0c;这些函数都是在Any类中定义的扩展函数&#xff0c;所以任何对象都可以调用…...

编程日记 2023/8/12 13:11:16

手机app测试

一、安装、卸载、更新、运行 1.安装、卸载 应用是否可以正常安装&#xff08;命令行安装&#xff1b;apk&#xff0f;ipa安装包安装&#xff09;&#xff08;有网&#xff0c;无网是否都正常&#xff09;卸载过程中出现死机&#xff0c;断电&#xff0c;重启等意外的情况&…...

编程日记 2023/8/12 13:10:15

Centos部署Git

Centos部署Git 文章目录 Centos部署Git部署步骤初始化配置免登录 部署步骤 初始化 -- 安装git yum install git配置免登录 配置git下载代码时 每次都需要输入密码的事情 -- 生成 gitconfig 文件 git config --global credential.helper store -- 配置登录邮箱 git config …...

编程日记 2023/8/12 13:09:13

k8s 控制器

Kubernetes&#xff08;K8S&#xff09;是一种开源的容器编排平台&#xff0c;它可以自动化地管理容器化应用程序的部署、扩展和运行。K8S中的控制器是一种重要的组件&#xff0c;它可以确保应用程序的状态与期望的状态一致。在K8S中&#xff0c;有五种常见的控制器&#xff0c…...

编程日记 2023/8/12 13:08:12

谷歌关闭跨域限制.(生成一个开发浏览器)，Chrome关闭跨域

(一)、首先找到浏览器在电脑磁盘中的位置,并复制 (二)、复制一个浏览器的快捷方式到桌面(不影响正常浏览器) (三)、chrom鼠标右键属性&#xff0c;修改快捷方式的目标 &#xff08;四&#xff09;chrome.exe 后面添加 --disable-web-security --user-data-dir 复制的Chrome浏览…...

编程日记 2023/8/12 13:07:10

实践指南-前端性能提升 270% | 京东云技术团队

一、背景 当我们疲于开发一个接一个的需求时&#xff0c;很容易忘记去关注网站的性能&#xff0c;到了某一个节点&#xff0c;猛地发现&#xff0c;随着越来越多代码的堆积&#xff0c;网站变得越来越慢。 本文就是从这样的一个背景出发&#xff0c;着手优化网站的前端性能&a…...

编程日记 2023/8/12 13:06:09

8月11日上课内容 nginx的多实例和动静分离

多实例部署 在一台服务器上有多个tomcat的服务。 配置多实例之前&#xff0c;看单个实例是否访问正常。 1.安装好 jdk 2.安装 tomcat cd /opt tar zxvf apache-tomcat-9.0.16.tar.gz mkdir /usr/local/tomcat mv apache-tomcat-9.0.16 /usr/local/tomcat/tomcat1 cp -a /usr…...

编程日记 2023/8/12 13:05:08

腾讯云CVM服务器端口在安全组中打开！

腾讯云服务器CVM端口怎么开通&#xff1f;腾讯云服务器端口是通过配置安全组规则来开通的&#xff0c;腾讯云服务器网以开通80端口为例来详细说下腾讯云轻量应用服务器开启端口的方法&#xff0c;其他的端口的开通如8080、1433、443、3306、8888等端口也适用于此方法&#xff0…...

编程日记 2023/8/12 13:04:07

k8s、docker添加daemon.json添加“exec-opts“: [“native.cgroupdriver=systemd“]后无法启动的问题

考虑k8s下docker下载镜像太慢&#xff0c;修改了daemon.json&#xff0c;按照手册抄&#xff0c;添加 {"exec-opts": ["native.cgroupdriversystemd"],"registry-mirrors": ["https://kn0t2bca.mirror.aliyuncs.com"] }结果发现k8s起…...

编程日记 2023/8/12 13:03:06

React组件性能优化实践

React组件性能优化最佳实践 React组件性能优化的核心是减少渲染真实DOM节点的频率&#xff0c;减少 Virtual DOM比对的频率。 组件卸载前进行清理操作 在组件中为 window注册的全局事件&#xff0c;以及定时器&#xff0c;在组件卸载前要清理掉&#xff0c;防止组件卸载后继…...

编程日记 2023/8/12 13:02:04

SpringBoot复习：（29）静态资源的配置路径

WebMvcAutoConfiguration 首页处理&#xff1a;...

编程日记 2023/8/12 13:01:03

mysql延时问题排查

背景介绍 最近遇到一个奇怪的问题&#xff0c;有个业务&#xff0c;每天早上七点半产生主从延时&#xff0c;延时时间12.6K&#xff1b; 期间没有抽数/备份等任务&#xff1b;查看慢日志发现&#xff0c;期间有一个delete任务&#xff0c;在主库执行了161s delete from xxxx_…...

编程日记 2023/8/12 13:00:02

接口设置了responseType:‘blob‘后，接收不到后端错误信息

下载文件流&#xff0c;需要接口设置responseType:blob&#xff0c;接口设置了responseType:blob后&#xff0c;拿不到后端接口的异常信息&#xff0c;我们只需要添加如下代码&#xff1a; const service axios.create({baseURL: ***, // url base url request url// withC…...

编程日记 2023/8/12 12:59:00

无涯教程-Perl - mkdir函数

描述 此功能使用MODE指定的模式创建一个名称和路径EXPR的目录,为清楚起见,应将其作为八进制值提供。 语法 以下是此函数的简单语法- mkdir EXPR,MODE返回值 如果失败,此函数返回0,如果成功,则返回1。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl -w$dirname &…...

编程日记 2023/8/12 12:57:59

NSGA-II vs. 传统遗传算法：多目标优化场景下，你该选哪个？（附对比实验）

NSGA-II与传统遗传算法深度对比&#xff1a;多目标优化实战指南 当面对需要同时优化多个相互冲突目标的工程问题时&#xff0c;算法选型往往成为项目成败的关键分水岭。传统遗传算法&#xff08;GA&#xff09;作为进化计算的经典代表&#xff0c;与专为多目标优化设计的NSGA-I…...

编程新知 2026/4/25 5:32:34

医院IT运维必看：PACS系统日常管理与维护实操手册（含日志分析、用户权限配置与基础表管理）

医院IT运维实战&#xff1a;PACS系统高效运维与深度维护指南 在医疗信息化高速发展的今天&#xff0c;PACS系统已成为医院影像科室运转的核心枢纽。作为医院信息科工程师&#xff0c;我们每天面对的是系统稳定运行与临床需求之间的微妙平衡——如何在保证724小时不间断服务的同…...

编程新知 2026/4/25 4:57:41

低成本室内定位方案实测：用两块ESP32-S2搭建WiFi FTM测距系统，精度到底如何？

低成本室内定位方案实测&#xff1a;ESP32-S2 WiFi FTM测距系统精度全解析 在物联网和智能家居领域&#xff0c;精准的室内定位一直是技术难点。传统方案如蓝牙信标或UWB虽然精度较高&#xff0c;但成本让许多中小型项目望而却步。最近&#xff0c;基于WiFi Fine Time Measurem…...

编程新知 2026/4/25 4:29:05

2026 年最佳 SEO 报告软件大揭秘：Semrush 等谁能脱颖而出？

SEO 报告现状与软件价值你已深知 SEO 策略成效显著&#xff0c;排名攀升、流量上升&#xff0c;内容吸引自然流量。然而&#xff0c;当被问及“投资换来了什么”时&#xff0c;2026 年多数 SEO 专业人士会在周日手忙脚乱地从五个仪表盘拼凑截图。虽有数据&#xff0c;但转化为清…...

编程新知 2026/4/25 3:56:38

生成式AI文档项目中的5个精彩演示应用深度解析

生成式AI文档项目中的5个精彩演示应用深度解析 【免费下载链接】generative-ai-docs This repository is deprecated and will be archived 项目地址: https://gitcode.com/gh_mirrors/ge/generative-ai-docs 生成式AI文档项目&#xff08;generative-ai-docs&#xff0…...

编程新知 2026/4/25 3:48:31

边缘节点的PHP应用部署、数据同步、算力调度标准化方案=hyperf最

针对边缘节点场景&#xff0c;按三个维度给你整理最实用的 Hyperf 方案&#xff1a;---一、应用部署标准化 容器化 & 打包 …...

编程新知 2026/4/25 3:07:58

MZ-Tools 8.0.1 版本更新详解：VB6/VBA老项目迁移到VS2022，这些新功能与修复能帮你大忙

MZ-Tools 8.0.1 版本更新详解&#xff1a;VB6/VBA老项目迁移到VS2022&#xff0c;这些新功能与修复能帮你大忙 在数字化转型浪潮中&#xff0c;仍有大量企业核心业务运行在VB6/VBA等传统技术栈上。据行业调研显示&#xff0c;全球范围内超过40%的企业仍在使用至少一个VB6构建的…...

编程新知 2026/4/25 2:15:11

后端转智能体开发有多香 核心技能无缝衔接

文章目录前言一、别再被忽悠了&#xff01;智能体开发&#xff0c;根本不是算法岗的专利二、后端转智能体有多香&#xff1f;这6大核心技能&#xff0c;直接无缝衔接2.1 接口调用与封装能力&#xff1a;智能体开发的基本功&#xff0c;你早就玩透了2.2 业务逻辑与流程编排能力&…...

编程新知 2026/4/25 1:11:16

WarcraftHelper：解决魔兽争霸III现代化运行难题的完整技术方案

WarcraftHelper&#xff1a;解决魔兽争霸III现代化运行难题的完整技术方案 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper WarcraftHelper是一款专为魔…...

编程新知 2026/4/25 0:34:56

3步可视化清理：用WinDirStat彻底告别Windows磁盘空间焦虑

3步可视化清理&#xff1a;用WinDirStat彻底告别Windows磁盘空间焦虑 【免费下载链接】windirstat WinDirStat is a disk usage statistics viewer and cleanup tool for Microsoft Windows 项目地址: https://gitcode.com/gh_mirrors/wi/windirstat 还在为电脑C盘飘红而…...

编程新知 2026/4/24 23:49:24