谈谈闭包和闭包使用场景
一、什么是闭包
概念：闭包还是作用域的一种特殊应用
二、触发闭包的情况
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)}}
相关文章：
谈谈闭包和闭包使用场景
一、什么是闭包 概念：闭包还是作用域的一种特殊应用 二、触发闭包的情况 1.函数当做返回值被返回 2.函数当做参数被传递 3.自执行匿名函数 //情况1：函数当做返回值被返回 function fn(){const a 1;return function(){console.log(a) //1}; } const a …...
MATLAB算法实战应用案例精讲-【图像处理】边界框锚框
目录 目标检测 应用场景 目标检测发展历程 常用数据集 边界框（bounding box）...
04什么场景要用到微服务
一句话导读 根据微服务的特点，可以总结为在构建复杂的、大型的、分布式的、高可用、高并发、高性能的应用时可以使用微服务架构。 目录 一句话导读 一、微服务适用场景 1.业务复杂，模块多且相对独立 2.团队多，管理隔离 3.应用规模大&#…...
.NET SqlSuger 简单介绍，超快开发数据库
文章目录 前言SqlSugar使用我的环境Nuget 安装新建连接串DB First 和 Code First使用增删改查 总结 前言 我之前介绍过EFCore 怎么使用Nuget快速创建数据库，我之后发现SqlSugar更快。这里简单再说一下SqlSugar如何使用 .NET Core 数据库DB First自动生成࿰…...
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…...
springcloud3 springcloud stream的学习以及案例（了解）
一 springcloud stream的作用 1.1 springcloud stream作用 stream屏蔽底层消息中间件的差异，降低切换成本，统一消息的编程模型。 stream中的消息通信模式遵循了“发布-订阅”模式。 1.2 Binder作用 通过定义绑定器Binder作为中间层，实现…...
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内置函数包括：let、run、with、apply、also，这些函数都是在Any类中定义的扩展函数，所以任何对象都可以调用…...
手机app测试
一、安装、卸载、更新、运行 1.安装、卸载 应用是否可以正常安装（命令行安装；apk／ipa安装包安装）（有网，无网是否都正常）卸载过程中出现死机，断电，重启等意外的情况&…...
Centos部署Git
Centos部署Git 文章目录 Centos部署Git部署步骤初始化配置免登录 部署步骤 初始化 -- 安装git yum install git配置免登录 配置git下载代码时 每次都需要输入密码的事情 -- 生成 gitconfig 文件 git config --global credential.helper store -- 配置登录邮箱 git config …...
k8s 控制器
Kubernetes（K8S）是一种开源的容器编排平台，它可以自动化地管理容器化应用程序的部署、扩展和运行。K8S中的控制器是一种重要的组件，它可以确保应用程序的状态与期望的状态一致。在K8S中，有五种常见的控制器，…...
谷歌关闭跨域限制.(生成一个开发浏览器)，Chrome关闭跨域
(一)、首先找到浏览器在电脑磁盘中的位置,并复制 (二)、复制一个浏览器的快捷方式到桌面(不影响正常浏览器) (三)、chrom鼠标右键属性，修改快捷方式的目标 （四）chrome.exe 后面添加 --disable-web-security --user-data-dir 复制的Chrome浏览…...
实践指南-前端性能提升 270% | 京东云技术团队
一、背景 当我们疲于开发一个接一个的需求时，很容易忘记去关注网站的性能，到了某一个节点，猛地发现，随着越来越多代码的堆积，网站变得越来越慢。 本文就是从这样的一个背景出发，着手优化网站的前端性能&a…...
8月11日上课内容 nginx的多实例和动静分离
多实例部署 在一台服务器上有多个tomcat的服务。 配置多实例之前，看单个实例是否访问正常。 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…...
腾讯云CVM服务器端口在安全组中打开！
腾讯云服务器CVM端口怎么开通？腾讯云服务器端口是通过配置安全组规则来开通的，腾讯云服务器网以开通80端口为例来详细说下腾讯云轻量应用服务器开启端口的方法，其他的端口的开通如8080、1433、443、3306、8888等端口也适用于此方法࿰…...
k8s、docker添加daemon.json添加“exec-opts“: [“native.cgroupdriver=systemd“]后无法启动的问题
考虑k8s下docker下载镜像太慢，修改了daemon.json，按照手册抄，添加 {"exec-opts": ["native.cgroupdriversystemd"],"registry-mirrors": ["https://kn0t2bca.mirror.aliyuncs.com"] }结果发现k8s起…...
React组件性能优化实践
React组件性能优化最佳实践 React组件性能优化的核心是减少渲染真实DOM节点的频率，减少 Virtual DOM比对的频率。 组件卸载前进行清理操作 在组件中为 window注册的全局事件，以及定时器，在组件卸载前要清理掉，防止组件卸载后继…...
SpringBoot复习：（29）静态资源的配置路径
WebMvcAutoConfiguration 首页处理：...
mysql延时问题排查
背景介绍 最近遇到一个奇怪的问题，有个业务，每天早上七点半产生主从延时，延时时间12.6K； 期间没有抽数/备份等任务；查看慢日志发现，期间有一个delete任务，在主库执行了161s delete from xxxx_…...
接口设置了responseType:‘blob‘后，接收不到后端错误信息
下载文件流，需要接口设置responseType:blob，接口设置了responseType:blob后，拿不到后端接口的异常信息，我们只需要添加如下代码： const service axios.create({baseURL: ***, // url base url request url// withC…...
无涯教程-Perl - mkdir函数
描述 此功能使用MODE指定的模式创建一个名称和路径EXPR的目录,为清楚起见,应将其作为八进制值提供。 语法 以下是此函数的简单语法- mkdir EXPR,MODE返回值 如果失败,此函数返回0,如果成功,则返回1。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl -w$dirname &…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。 核心体现在三点： 命令太多了，记不住 软件安装包名字复杂&…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...