js 之让人迷惑的闭包

文章目录

  • 一、闭包是什么? 🤦‍♂️
  • 二、闭包 😎
  • 三、使用场景 😁
  • 四、使用场景(2) 😁
  • 五、闭包的原理
  • 六、思考
  • 总结
  • 一、 更深层次了解闭包,分析以下代码执行过程
  • 二、闭包
  • 三、闭包定义
  • 四、闭包导致的内存泄漏
  • 面试题



一、闭包是什么? 🤦‍♂️


当一个函数的返回值又是一个函数,作为返回值的那个函数叫做闭包
它利用了 作用域的嵌套 ,将原本的局部变量进化成私有变量的环境,叫闭包

  1. 闭包由两部分组成 :函数+可以访问的自由变量
  2. 一个普通的函数function,如果它可以访问外层作用于的自由变量,那么这个函数就是一个闭包

二、闭包 😎


	 const f = (function() {let a = 0;return function() {a++;console.log(a);};})();f();f();f();

        好兄弟,看!这是一个闭包函数,我们先来分析下这个函数

 	    ()()   他叫做立即运行的匿名函数,当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来假设我们删去 这个匿名函数,f 是这个最外层的Function,当f()执行时,返回里层的function,f()()才能调用里层的function假设去掉,咱们接下往下走f 其实就是这个函数的返回值  return 出来的函数

        第一段代码执行 f 之后,发现a++了,因为里层的函数执行了,那为什么我再最下面console.log(a) 报错呢??

	......console.log(a);

         我们都知道let 声明的变量有作用域,不会变量提升,而对于内部的function来说,他是可以拿到a的,因为他们同一作用域(外层),a是个局部变量,所以在外层拿不到;

         这也是闭包的 特点将原本局部作用域中的局部变量,临时保存起来,不受外部的作用域的影响,可以被外部,反复使用,刚好说明了我们第二条定义,利用了 “ 作用域的嵌套 ”, 将原本的局部变量进化成私有变量的环境,叫闭包


请添加图片描述


三、使用场景 😁


         举两个小例子,让我们看看闭包的使用场景,看完以下两个例子,好兄弟你能不能想起来对闭包的定义,以及对闭包特点作用

 	  var allLi = document.querySelectorAll("li");for (var i = 0; i < allLi.length; i++) {console.log(i); //这里我每次都能拿到iallLi[i].onclick = (function(i) {return function() {console.log(i);};})(i);}// 当我点击的时候,真正触发的时retrun出来的function// 借助匿名函数帮助我们创建了一个作用域// 不管里层函数什么时候执行,都能拿到匿名函数里的变量for (let i = 0; i < allLi.length; i++) {console.log(i); //这里我每次都能拿到iallLi[i].onclick = function(i) {console.log(i)}}// 这个其实也是一个闭包,因为let 有作用域

函数的返回值又是一个函数
利用 作用域的嵌套 ,将 原本的局部变量 进化成 私有变量的环境 ,叫闭包


四、使用场景(2) 😁


        给不能传参内置函数回调参数 传参

     let a = "hello";setTimeout(function(a) {console.log(a);}, 1000);

三个问题

  1. setTimeout 是什么类型函数?
  2. 内置函数可以传参吗?
  3. 如果可以,怎么传?就像是上面那个案例吗?

直接说明:上个案例是错误写法,首先setTimeout是window内置的定时器函数,其次他不能传参,因为是内置!!!那有没有解决方案呢?yes!yes!yes! ✌

看答案之前先思考两个问题

  1. setTimeout 接收两个参数,第一参数是什么?
  2. 为什么上个案例返回undifine?
setTimeout(fn("hello"), 5000);function fn(a) {return function() {console.log(a);};}

说明:setTimeout是第一个参数是一个函数,因为是内置函数没有接收值,所以不能传参。之所以上个案例打印undifined,是因为上一个函数没有返回值,返回值的标志就是retrun。 既然这样,那我们把这个函数拿出来,而且retrun出去,哎嘿,巧了不是,意外写了个闭包,呐呐,这就是闭包使用场景二:给不能传参内置函数回调参数 传参 ✌ ,这一刻你有没有爱上闭包??

五、闭包的原理


         大篇说了很多闭包,我想好兄弟应该对闭包有很深的印象了吧?如果 `没有`, 那好的,是你出去还是我出去?👉,开个玩笑啦,让好兄弟没能理解是我的 “锅” ,烦请好兄弟评论留言,小妹我加以改正,一起进步,好兄弟如果有收获,还请多多点赞关注,你的大拇指就是小妹更新的动力,爱你 biu biu biu ~ 💕 🥰,言归正传,我们来看看闭包的原理
  1. 从计算机的角度分析:利用了计算机的垃圾回收机制。比如我们电脑桌上的回收站,他是先保存到一个临时空间,如果再使用就可以重复使用,确定不用最终删除
  2. js特性分析:利用了函数的定义作用域,和函数的执行上下文 (作用域链),不管函数在哪里执行,函数都可以操作自身定义域中存在的变量

六、思考


         我们在使用闭包时,可以在作用外部操作作用域内部的数据,有些我们也不知道什么时候调用了影响了结果,使用闭包可以不用定义很多全局变量,但是根据计算机的垃圾回收机制,有些不确定删除的变量会占用内存,所以也比较消耗内存,对于低版本的ie浏览器(ie8),可能会造成内存泄漏就会产生蓝屏卡死等啥的,好在现在浏览器会有内存保护机制,如果满了就会报错,我们修改后刷新下即可

总结


         通篇说了很多次闭包的概念,这里我还是想再强调一下,闭包不是一种固定的写法,它是一种环境,利用`作用域的嵌套`, 得到一种效果:原本的`局部变量`进化成`私有变量`,重复使用, 闭包能少用就少用,像递归,能不用就不用

请添加图片描述
你学废了吗?😂      谢谢阅读,谢谢点赞并关注(没错我就要道德绑架你!)







一、 更深层次了解闭包,分析以下代码执行过程



1.	function foo(){
2.		function bar(){
3.			console.log('吃饭饭')
4.		}
5.		return bar
6.	}
7.	var fn=foo()
8.	fn() 

请添加图片描述
原理:

  1. 调用栈是代码运行环境,在编译前会有个GO对象存放当前环境内置方法类等
  2. 在编译时,会生成一个全局执行上下文 GEC,会被关联到一个变量环境VO,全局执行上下文的VO 对应的是全局变量GO,在编译时,代码中的变量和函数都会被作为属性添加到VO中
  3. 不同的是,编译时变量为undi ,函数对象对应一个地址,同时也会为函数对象生成一个内存空间
  4. 当代码运行时,再执行函数对象时,会创建对应的函数执行上下文 FEC,同样也会被关联到一个变量环境VO,函数执行上下文的VO对应的是AO,当函数执行完毕,这个函数执行上下文也会弹出调用栈

代码:

  1. 开始分析执行过程,代码至上而下执行,先编译后执行
  2. 第一行 发现是个函数,GO 存放一个 foo:地址 ;第七行,发现是个变量, GO 存放一个 fn:undi
  3. 编译完成,开始执行代码
  4. 代码应该是从第7行开始执行的。 foo() ,发现foo对应的是个内存地址,找到内存地址,并创建一个函数执行上下文,因为foo里面包括了定义了一个函数bar,这是这个AO会定义一个bar:内存地址,且开辟一个bar的内存空间,。
  5. 并把函数执行上下文放到调用栈,将bar的内存地址返回给fn
  6. 这是fn 赋值为一个函数,当fn执行时,同样的道理,找到对应bar 的内存地址,并创建 bar 这个函数的函数执行上下文,因为函数里只有console操作,所以对应的AO 为空
  7. 当函数执行完毕,对应的函数执行上下文弹出调用框,

二、闭包

	
1. 	function foo(){
2.		var name='haha'
3		function bar(){
4			console.log('吃饭饭' , name)
5		}
6		return bar
7	}
8	var fn=foo()
9	fn() 
  1. 依旧开始分析执行过程,代码至上而下执行
  2. 第一行,发现是个函数,好的,GO添加一个属性 foo:内存地址
  3. 1-7 函数体就会跳过
  4. 第八行,发现声明了一个fn ,好的,GO添加一个属性 fn:unde
  5. 编译完成,开始执行代码
  6. 他会直接从第八行开始解析,foo()执行
  7. 在GO里找到foo,发现是个地址,找到对应的内存地址,foo() 所以创建了一个函数执行上下文,在foo里发现定义了一个name,这是这个函数执行上下文对应的AO里就会创建一个name:unde,又发现创建了一个bar,是个函数,所以对应创建了内存空间和函数执行上下文
  8. 编译好了以后开始执行,首先name赋值为haha,这时foo对应AO里的namew为haha ,并且把bar retrun出去
  9. 这时 GO里的fn 赋值为一个内存地址
  10. foo执行完毕,被销毁,弹出调用栈。
  11. fn执行,同样的道理,先找到对应的内存地址,创建函数执行上下文,编译bar,发现没有什么变量定义
  12. console.log(name),在bar这个AO里是没有任何值的,因为每个函数内存地址里存放当前作用域和父级作用域,所以根据父级作用域进行查找,此时的name值为Foo里的name
  13. 哎?? foo不是被销毁了吗??
  14. 这就是闭包 闭包由两部分组成 :函数+可以访问的自由变量




请添加图片描述



三、闭包定义

  1. 闭包由两部分组成 :函数+可以访问的自由变量
  2. 一个普通的函数function,如果它可以访问外层作用于的自由变量,那么这个函数就是一个闭包
  3. 从广义的角度来说 : JavaScript中的函数都是闭包
  4. 从狭义的角度来说 : JavaScript中一个函数,如果访问了外层作用于的变量,那么它是一个闭包
  5. 闭包在实现上是一个结构体(对象),它存储了一个函数和一个关联的环境 ( 相当于一个符号查找表 );
  6. 闭包跟函数最大的区别在于,当捕捉闭包的时候,它的 自由变量 会在捕捉时被确定,这样即使脱离了捕捉时的上下文,它也能照常运行
 var name = '夏夏'function my(){console.log(name)}

        根据1234定义来说,当一个函数内部访问到外部的变量就成为闭包,其实上面例子就是一个闭包,我们无意间写了很多闭包,哈哈哈哈

四、闭包导致的内存泄漏

请添加图片描述
        我们经常会说闭包是造成内存泄露的,为什么呢?

  1. 比如在上面的案例中,如果后续我们不再使用 foo 函数了,那么该函数对象应该要被销毁掉,并且其引用着的父
    作用域AO也应该被销毁掉;但是目前因为在全局作用域下 fn 变量对 0xb00 的函数对象有引用,而 0xb00 的作用域中 AO 有用,所以最终会造成这些内存都是无法被释放的;
  2. 所以我们经常说的闭包会造成内存泄露,其实就是刚才的引用链中的所有对象都是无法释放,那么,怎么解决这个问题呢?
  3. 当将 foo 设置为 null 时,就不再对函数对象 0xb00 有引用,那么对应的 AO 对象也就不被销毁了,在 GO 的下一次检测中,它们就会被销毁掉;直接把家连根拔起
foo = null

面试题

为什么会有内存泄漏

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

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

相关文章

GNN+RA 文献阅读

[1] X. Wang et al., ‘Scalable Resource Management for Dynamic MEC: An Unsupervised Link-Output Graph Neural Network Approach’. paper code&#xff1a;GitHub - UNIC-Lab/LOGNN: This is the code for paper "Scalable Resource Management for Dynamic MEC:…

吃透底层:从路由到前缀树

前言 今天学到关于路由相关文章&#xff0c;发现动态路由中有一个很常见的实现方式是前缀树&#xff0c;很感兴趣这个算法&#xff0c;故进行记录。 前缀树 Trie&#xff08;又被叫做字典树&#xff09;可以看作是一个确定有限状态自动机&#xff0c;尽管边上的符号一般是隐含…

kaggle新赛:写作质量预测大赛【数据挖掘】

赛题名称&#xff1a;Linking Writing Processes to Writing Quality 赛题链接&#xff1a;https://www.kaggle.com/competitions/linking-writing-processes-to-writing-quality 赛题背景 写作过程中存在复杂的行为动作和认知活动&#xff0c;不同作者可能采用不同的计划修…

Godot 添加信号

前言 Godot 里面C#和GDScirpt 的用法完全不一样&#xff0c;网上相关资料太少了。 什么是信号 信号分为信号源&#xff0c;触发&#xff0c;目的节点。信号源在某些条件下触发信号&#xff0c;比如按钮点击&#xff0c;鼠标悬停等事件 #mermaid-svg-wyr9ARVcBFmUUu8y {font-…

JVM面试题:(二)内存结构和内存溢出、方法区的两种实现

内存结构&#xff1a; 方法区和对是所有线程共享的内存区域&#xff1b;而java栈、本地方法栈和程序员计数器是运行是线程私有 的内存区域。 Java堆&#xff08;Heap&#xff09;,是Java虚拟机所管理的内存中最大的一块。Java堆是被所有线程共享的一块内 存区域&#xff0c;在…

2023年山东省安全员C证证考试题库及山东省安全员C证试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年山东省安全员C证证考试题库及山东省安全员C证试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大…

C# 图解教程 第5版 —— 第1章 C# 和 .NET 框架

文章目录 1.1 在 .NET 之前1.2 .NET 时代1.2.1 .NET 框架的组成1.2.2 大大改进的编程环境 1.3 编译成 CIL1.4 编译成本机代码并执行1.5 CLR1.6 CLI1.7 各种缩写1.8 C# 的演化1.9 C# 和 Windows 的演化&#xff08;*&#xff09; 1.1 在 .NET 之前 MFC&#xff08;Microsoft Fou…

论文解析——AMD EPYC和Ryzen处理器系列的开创性的chiplet技术和设计

ISCA 2021 摘要 本文详细解释了推动AMD使用chiplet技术的挑战&#xff0c;产品开发的技术方案&#xff0c;以及如何将chiplet技术从单处理器扩展到多个产品系列。 正文 这些年在将SoC划分成多个die方面有一系列研究&#xff0c;MCM的概念也在不断更新&#xff0c;AMD吸收了…

Docker-compose创建LNMP服务并运行Wordpress网站平台

一、部署过程 1.安装Docker #关闭防火墙 systemctl stop firewalld.service setenforce 0#安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2 #设置阿里云镜像源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/d…

JavaEE-文件IO操作

构造方法 一般方法&#xff0c;有很多&#xff0c;我们以下只是列举几个经常使用的 注意在上述的操作过程中&#xff0c;无论是绝对路径下的这个文件还是相对路径下的这个文件&#xff0c;都是不存在的 Reader 使用 --> 文本文件 FileReader类所涉及到的一些方法 Fil…

【轻松玩转MacOS】安全隐私篇

引言 这一篇将介绍如何保护MacOS的安全&#xff0c;包括如何设置密码&#xff0c;使用防火墙&#xff0c;备份数据等重要环节&#xff0c;避免因不慎操作或恶意攻击带来的安全风险&#xff0c;让你的MacOS之旅更安心、更放心。 一、设置密码&#xff1a;保护你的MacOS的第一道…

关于神经网络的思考

关于感知机 感知机&#xff08;Perceptron&#xff09;和神经网络&#xff08;Neural Network&#xff09;之间有一定的关系&#xff0c;可以说感知机是神经网络的一个基本组成单元。 感知机&#xff1a; 感知机是一种简单的二分类线性分类器。它接受多个输入&#xff0c;对每…

【小记】Java将字符串中的EL表达式动态转换为Map中的值

项目中碰到了这样的问题&#xff0c;例如数据库中有一个字符串模版如下&#xff1a; ${userNamme}开启了一个新的${project}我们要替换里面的${}表达式&#xff0c;来实现动态的生成完整的信息~实现方式很简单如下&#xff1a; 引入pom依赖&#xff1a; <dependency>&l…

使用css制作3D盒子,目的是把盒子并列制作成3D货架

注意事项&#xff1a;这个正方体的其他面的角度很难调&#xff0c;因此如果想动态生成&#xff0c;需要很复杂的设置动态的角度&#xff0c;反正我是折腾了半天没继续搞下去&#xff0c; 1. 首先看效果&#xff08;第一个五颜六色的是透明多个面&#xff0c;第2-3都是只有3个面…

自动拟人对话机器人在客户服务方面起了什么作用?

在当今数字时代&#xff0c;企业不断寻求创新的方法来提升客户服务体验。随着科技的不断进步和消费者期望的提升&#xff0c;传统的客户服务方式逐渐无法满足现代消费者的需求。因此&#xff0c;许多企业正在积极探索利用新兴技术来改进客户服务&#xff0c;自动拟人对话机器人…

MongoDB——window11安装mongodb5.0.21版本服务端(图解版)

目录 一、mongodb官网下载地址二、安装步骤三、配置环境变量四、运行mongodb 一、mongodb官网下载地址 mongodb官网下载地址&#xff1a;https://www.mongodb.com/try/download/community 二、安装步骤 双击运行下载好的mongodb-windows-x86_64-5.0.21-signed.msi安装包&am…

ELementUI之CURD及表单验证

一.CURD 1.后端CURD实现 RequestMapping("/addBook")ResponseBodypublic JsonResponseBody<?> addBook(Book book){try {bookService.insert(book);return new JsonResponseBody<>("新增书本成功",true,0,null);} catch (Exception e) {e.p…

bin-editor-next实现josn序列化

线上链接 BIN-EDITOR-NEXThttps://wangbin3162.gitee.io/bin-editor-next/#/editor gitee地址bin-editor-next: ace-editor 的vue3升级版本https://gitee.com/wangbin3162/bin-editor-next#https://gitee.com/link?targethttps%3A%2F%2Funpkg.com%2Fbin-editor-next%2F 实现…

23年基因蓝皮书略读

2023年基因慧蓝皮书略读 1.发展环境1.1 宏观环境1.2 基因产业内涵 2 应用场景2.1 生育支持与生育健康筛查2.2 老龄化与肿瘤精准防控2.2.1 肿瘤早筛2.2.2 肿瘤伴随诊断2.2.3 MRD检测2.2.4 生物药研发及基因科技 3 产业发展3.1 产业图谱及产业链分析拟上市肿瘤检测公司上市基因企…