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

谈谈闭包和闭包使用场景

一、什么是闭包

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

二、触发闭包的情况

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)}}

 

http://www.lryc.cn/news/119887.html

相关文章:

  • MATLAB算法实战应用案例精讲-【图像处理】边界框锚框
  • 04什么场景要用到微服务
  • .NET SqlSuger 简单介绍,超快开发数据库
  • SpringBoot复习:(28)【前后端不分离】自定义View
  • springcloud3 springcloud stream的学习以及案例(了解)
  • Kotlin理解内置函数
  • 手机app测试
  • Centos部署Git
  • k8s 控制器
  • 谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域
  • 实践指南-前端性能提升 270% | 京东云技术团队
  • 8月11日上课内容 nginx的多实例和动静分离
  • 腾讯云CVM服务器端口在安全组中打开!
  • k8s、docker添加daemon.json添加“exec-opts“: [“native.cgroupdriver=systemd“]后无法启动的问题
  • React组件性能优化实践
  • SpringBoot复习:(29)静态资源的配置路径
  • mysql延时问题排查
  • 接口设置了responseType:‘blob‘后,接收不到后端错误信息
  • 无涯教程-Perl - mkdir函数
  • css3 瀑布流布局遇见截断下一列展示后半截现象
  • C++初阶之一篇文章教会你list(理解和使用)
  • 如何给Linux开启swap虚拟内存
  • spring按条件注入@Condition及springboot对其的扩展
  • MySQL多表连接查询3
  • 【从零开始学习JAVA | 第四十五篇】反射
  • 顺丰科技数据治理实践
  • Nginx+Tomcat负载均衡、动静分离实例详细部署
  • Java多线程(3)---锁策略、CAS和JUC
  • Linux:Shell编辑之文本处理器(awk)
  • 探索FSM (有限状态机)应用