js中的闭包[通俗易懂]

js中的闭包[通俗易懂]闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函…

大家好,又见面了,我是你们的朋友全栈君。

闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?

我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包就是用来解决这一需求的,闭包的本质就是在一个函数内部创建另一个函数。
我们首先知道闭包有3个特性:
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

本文我们以闭包两种的主要形式来学习
在这里插入图片描述

在这段代码中,a()中的返回值是一个匿名函数,这个函数在a()作用域内部,所以它可以获取a()作用域下变量name的值,将这个值作为返回值赋给全局作用域下的变量b,实现了在全局变量下获取到局部变量中的变量的值

再来看一个闭包的经典例子
在这里插入图片描述

一般情况下,在函数fn执行完后,就应该连同它里面的变量一同被销毁,但是在这个例子中,匿名函数作为fn的返回值被赋值给了fn1,这时候相当于fn1=function(){var n = 0 … },并且匿名函数内部引用着fn里的变量num,所以变量num无法被销毁,而变量n是每次被调用时新创建的,所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁,于是乎最后就剩下孤零零的num,于是这里就产生了内存消耗的问题

再来看一个经典例子-定时器与闭包

写一个for循环,让它按顺序打印出当前循环次数
在这里插入图片描述

按照预期它应该依次输出1 2 3 4 5,而结果它输出了五次5,这是为什么呢?原来由于js是单线程的,所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行,而在等待过程中for循环就已经在执行,等到setTimeout可以执行的时候,for循环已经结束,i的值也已经编程5,所以打印出来五个5,那么我们为了实现预期结果应该怎么改这段代码呢?(ps:如果把for循环里面的var变成let,也能实现预期结果)

在这里插入图片描述

引入闭包来保存变量i,将setTimeout放入立即执行函数中,将for循环中的循环值i作为参数传递,100毫秒后同时打印出1 2 3 4 5

那如果我们想实现每隔100毫秒分别依次输出数字,又该怎么改呢?

在这里插入图片描述

在这段代码中,相当于同时启动3个定时器,i*100是为4个定时器分别设置了不同的时间,同时启动,但是执行时间不同,每个定时器间隔都是100毫秒,实现了每隔100毫秒就执行一次打印的效果。

②闭包作为参数传递

在这里插入图片描述

在这段代码中,函数fn1作为参数传入立即执行函数中,在执行到fn2(30)的时候,30作为参数传入fn1中,这时候if(x>num)中的num取的并不是立即执行函数中的num,而是取创建函数的作用域中的num这里函数创建的作用域是全局作用域下,所以num取的是全局作用域中的值15,即30>15,打印30

最后总结一下闭包的好处与坏处
好处

①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突

②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149083.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • [Halcon&标定] 单相机标定「建议收藏」

    [Halcon&标定] 单相机标定「建议收藏」为什么要进行单相机标定?广义:畸变矫正和一维和二维测量1)畸变矫正:    在几何光学和阴极射线管(CRT)显示中。畸变是对直线投影的一种偏移。简单来说直线投影是场景内的一条直线投影到图片上也保持为一条直线。那畸变简单来说就是一条直线投影到图片上不能保持为一条直线了。这是一种光学畸变(opticalaberration)。畸变是一种相差…

    2022年5月28日
    27
  • 动漫常用网站/APP 彻底帮你解决看动漫的烦恼[通俗易懂]

    动漫常用网站/APP 彻底帮你解决看动漫的烦恼[通俗易懂]本文是众多使用技巧中其中的一篇,全部使用技巧点击链接查看,保证你收获满满我主页中的思维导图中内容大多从我的笔记中整理而来,相应技巧可在笔记中查找原题,有兴趣的可以去我的主页了解更多计算机学科的精品思维导图整理本文可以转载,但请注明来处,觉得整理的不错的小伙伴可以点赞关注支持一下哦!本文提到的所有软件和工具,可关注公众号一起学计算机点击资源获取获得本人最常用的网站就是AGE动漫,这是我用过最好的动漫网站,资源算是最全的吧,并且大多数动漫都提供百度云链接,可下载观看,…

    2022年8月23日
    3
  • java卸载不了_java卸载不了怎么处理?卸载时总出现这个

    java卸载不了_java卸载不了怎么处理?卸载时总出现这个windowsXP在安装有些软件时,会弹出警告框:“不能访问windowsInstaller服务,可能是你在安全模式下运行windows,或者windowsInstaller没有正确安装。请和你的支持人员联系以获得帮助。”的解决方案:windowsinstaller没有正确安装到服务里停掉windowsinstaller服务然后下载InstMsiW.exe右击msi.inf点击安装…

    2022年5月19日
    186
  • 动态规划:完全背包、多重背包[通俗易懂]

    动态规划:完全背包、多重背包[通俗易懂]一、问题描述:  完全背包:有N种物品和一个容量为V的背包,每种物品都有无限件可用。第i种物品的费用是c[i],价值是w[i]。求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大。      多重背包:有N种物品和一个容量为V的背包。第i种物品最多有n[i]件可用,每件费用是c[i],价值是w[i]。求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值…

    2022年7月26日
    5
  • Linux重启网卡失败_debian重启网卡命令

    Linux重启网卡失败_debian重启网卡命令Linux下解决网卡重启失败:Jobfornetwork.servicefailedbecausethecontrolprocessexitedwitherrorcode

    2022年9月2日
    2
  • STUN详解

    STUN详解STUN是一个简单的客户端-服务器协议。客户端发送一个请求到一台服务器,而服务器返回一个响应。有两种类型的请求:绑定请求(通过UDP发送)和共享密钥请求(发送TLS(通过TCP))。共享秘密请求服务器返回一个临时的用户名和密码。此用户名和密码用于在随后的绑定请求和绑定响应,身份验证和消息完整性的目的。STUN客户和STUN服务器之间可能有一个或多个NAT。

    2022年7月17日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号