前端八股文之“闭包”

一、定义

一句话概括闭包:能够访问函数内部变量的函数与这个变量的组合构成了闭包结构。如下代码

 function fuc1(){let num = 999return function fuc2(){console.log(num)}}fuc1()();

如代码所示,fuc2和父级变量num构成了一个闭包环境。

二、应用场景

1、变量私有化,防止变量被污染。

var Counter = (function () {var privateCounter = 0;function changeBy(val) {privateCounter += val;}return {increment: function () {changeBy(1);},decrement: function () {changeBy(-1);},value: function () {return privateCounter;},};
})();console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

2、函数防抖

        let inp = document.querySelector("input")function fun() {console.log(this.value)}inp.oninput = debounce(fun, 3000)function debounce(fun,delay) {let t = nullconsole.log('闭包父级变量T---->',t)return function () {console.log(t,"----每次触发input事件,t的值")if (t) {console.log(t,"清除定时器的值")clearTimeout(t) //每一次触发事件都要先清除定时器然后再重新设置定时器}t = setTimeout(() => {fun.call(this)console.log(t,"setTimeout内")}, delay);}}

三、缺点

父级函数的变量会永久存放在内存中,除非手动清除,否则容易造成内存泄露。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/74570.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】string类模拟实现上篇(附完整源码)

目录 前言1. string的基本结构2. 构造函数、析构函数2.1 构造函数的实现2.1.1带参构造函数 2.2析构函数2.3无参构造函数2.4无参和带参构造函数合并 3. string的遍历3.1 operator[ ]3.2迭代器模拟实现 (简单实现)3.3 const迭代器模拟实现 4. 数据的增删查改4.1 reser…

2、在Windows 10中安装和配置 PostgreSQL 15.4

一、PostgreSQL 安装前简介 PostgreSQL(通常简称为PG SQL)是一个强大、开源的关系型数据库管理系统(DBMS),它具有广泛的功能和可扩展性,被广泛用于企业和开发项目中,PostgreSQL 具有如下一些关键特点&…

【云原生系列】Docker学习

目录 一、Docker常用命令 1 基础命令 2 镜像命令 2.1 docker images 查看本地主机的所有镜像 2.2 docker search 搜索镜像 2.3 docker pull 镜像名[:tag] 下载镜像 2.4 docker rmi 删除镜像 2.5 docker build 构建镜像 3 容器命令 3.1 如拉取一个centos镜像 3.2 运行…

SpringMVC的常用注解,参数传递以及页面跳转的使用

目录 slf4j 常用注解 RequestMapping RequestParam RequestBody PathVariable 参数传递 首先在pom.xml配置文件中导入SLF4J的依赖 基础类型String 复杂类型 RequestParam PathVariable RequestBody 增删改查 返回值 void返回值 String返回值 modelString …

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真+程序+原理图+报告+讲解视频)

51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频) 1.主要功能:2.仿真3. 程序代码4. 原理图5. 设计报告6. 设计资料内容清单&&下载链接 51单片机的简易篮球计分器倒计时仿真设计( proteus仿真程序原理图报告讲解视频…

List常见面试问题

List的特点有哪些? Java中的List是一种存放有序的、可以重复的数据的集合,它允许重复元素的存在。List中的元素都有对应的一个序列号(索引)记录着元素的位置,因此可以通过这个序列号来访问元素。 ‍ Java中集合有哪些? Java中…

最新仿闲鱼链接+独立后台管理 跳转APP

2024最新仿xy链接源码 后台一键生成链接,后台管理教程:解压源码,修改数据库config/Congig 不会可以看源码里有教程 下载程序:https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3

如何利用Socks5代理IP提升网络安全与跨境电商业务

在今天的数字时代,网络安全对于个人和企业来说都至关重要。随着跨境电商和在线游戏等业务的不断发展,保护网络安全变得尤为重要。Socks5代理IP是一项强大的工具,可以帮助您实现更高水平的网络安全,同时促进跨境电商和游戏领域的增…

【C进阶】分析 C/C++程序的内存开辟与柔性数组(内有干货)

前言: 本文是对于动态内存管理知识后续的补充,以及加深对其的理解。对于动态内存管理涉及的大部分知识在这篇文章中 ---- 【C进阶】 动态内存管理_Dream_Chaser~的博客-CSDN博客 本文涉及的知识内容主要在两方面: 简单解析C/C程序…

CSS中如何实现一个自适应正方形(宽高相等)的元素?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐利用padding百分比⭐2. 利用::before伪元素⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对W…

Camunda 7.x 系列【43】事务子流程

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 概述2. 和 ACID 的区别3. 取消和补偿事件3.1 取消结束事件3.2 取消边界事件3.3 补偿边界…

【面试心得】系统调用

这个问题也是在九识面试的时候被问到的,当时我说就是像Shell,从用户态转移到内核态的过程,面试官让我说的详细一点,我就说不出来了,然后我就说了一些函数调用的过程,hhhh。 现在在这里做一个记录吧。 本文…

车载诊断数据库——诊断问卷调查表与CDD关联关系

车载诊断数据库——诊断问卷调查表与CDD关联关系 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生…

typeScript 学习笔记(二)

类接口 TypeScript 入门教程 (xcatliu.com) 十四.类 ① 类 类:定义了一件事物的抽象特点,包含它的属性和方法对象:类的实例,通过new生成面向对象(OOP)的三大特性:封装、继承、多态封装&…

【代表团坐车】Python 实现-附ChatGPT解析

1.题目 某组织举行会议,来了多个代表团同时到达,接待处只有一辆汽车,可以同时接待多个代表团,为了提高车辆利用率,请帮接待员计算可以坐满车的接待方案,输出方案数量。 约束: 1.一个团只能上一辆车,并且代表团人数(代表团数量小于30,每人代表团人数小于30)小于汽车容量…

LAMP搭建WordPress

L linux A apache hhtpd M mysql/maridb P PHP1、 安装php yum -y install php php-fpm php-server php-mysql1.1、 启动php-fpm并自启 systemctl enable php-fpm --now[rootecs-1cee ~]# systemctl status php-fpm ● php-fpm.service - The PHP FastCGI Process ManagerLoa…

VPP以太网接口模式

以太网接口结构ethernet_interface_t如下,其成员flags为32bit,高16bit为运行状态标志,低16bit为操作标志。最低bit位表示接口的L2/L3模式设置。第16bit为1表示接口运行在L3模式。 /* Ethernet interface instance. */ typedef struct ethern…

muduo 32 muduo项目总结

Timestamp时间管理类 ①:主要提供now函数显示当前时间:自1970年1月1日0点以来经过的秒数,使用time函数 ②: toString函数将字符串转化成时间字符串,使用localtime函数将秒数格式化成日历时间 解析tm_time 并以日历格…

计算机毕业设计 JSPM校园闲置物品交易平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

【C++模拟实现】手撕AVL树

【C模拟实现】手撕AVL树 目录 【C模拟实现】手撕AVL树AVL树的介绍(百度百科)AVL树insert函数的实现代码验证是否为AVL树AVL树模拟实现的要点易忘点AVL树的旋转思路 作者:爱写代码的刚子 时间:2023.9.10 前言:本篇博客将…