关于JavaScript闭包理解

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

关于JavaScript闭包理解

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



在这里插入图片描述

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

在这里插入图片描述

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

按照预期它应该依次输出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

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

②闭包作为参数传递
在这里插入图片描述

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

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

好处

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

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

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

坏处

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

变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;

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

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

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

(0)
上一篇 2025年9月16日 下午7:01
下一篇 2025年9月16日 下午7:22


相关推荐

  • webapp开发框架[通俗易懂]

    webapp开发框架[通俗易懂]前言快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业APP开发企业,和APP服务提供商。安卓和IOS的操作方式,开发模式,界面UI显示方面的差别,也使得原生APP的不同版本体验有很大的区别,光是做兼容性调测,都要花费开发企业不少的时间。近年来,另一种应用形态——基于HTML5技术的WebApp也如雨后春笋般出现,于是关于原生APP与HTML5APP

    2022年4月19日
    103
  • axios 安装和使用

    axios 安装和使用安装 axios 指定版本 npminstallax 0 21 0save axios 使用 scriptlang ts import defineCompon from vue importaxiosf axios exportdefaul name Home setup axios get ebook list then response amp scriptlang ts

    2026年3月17日
    2
  • CSS 滚动条样式美化

    CSS 滚动条样式美化滚动条主要属性 webkit scrollbar 滚动条整体部分 webkit scrollbar thumb 滚动条里面的滑块 webkit scrollbar track 滚动条的轨道 webkit scrollbar button 滚动条轨道两端的按钮 允许通过点击微调滑块的位置 webkit scrollbar track piece 内层轨道 滚动条中间部分 webkit scrollbar corner 边角 及两个滚动条的交汇处 webkit r

    2026年3月26日
    2
  • 重定向与转发的区别_响应重定向和请求转发的区别

    重定向与转发的区别_响应重定向和请求转发的区别重定向和转发的区别: 重定向和转发的区别就是请求服务器几次, 如果请求服务器地址没有变说明这是一次请求请求在自己的服务器里面流转这就是转发这是服务器行为。 如果请求服务器地址变了,说明这是请求了二次,第二次请求由客户端流浪器负责,在多台服务器之间流转这就是客户端行为。 重定向: 1、重定向的速度比较慢,需要跨越服务器 2、重定向是两次不同的请求 3、重定向是执行重定向之后的代码 4、地址栏的地址是会发生变化的 5、重定向不包含项目的根目录 6、重定向是会就是.

    2025年10月6日
    5
  • vscode插件大全_vscode必装插件

    vscode插件大全_vscode必装插件Beautify#格式化htmljscss代码vscode-icons#文件图标PartialDiff#对比两段代码或文件Br…

    2026年4月16日
    5
  • web安全概述_网络安全和web安全

    web安全概述_网络安全和web安全域名什么是域名?域名(DomainName),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。例:www.baidu.comDNS什么是DNS?域名系统(DomainNameSystem,缩写:DNS)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。DNS使用UDP端口53。当前,对于每一级域名长度的限制是63个字符,域名总长度则不能超过2

    2026年1月30日
    4

发表回复

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

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