首页 > 编程语言 >彻底理解JavaScript中的闭包

彻底理解JavaScript中的闭包

时间:2024-09-07 20:52:23浏览次数:11  
标签:闭包 变量 彻底 作用域 JavaScript num 执行 函数

闭包是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;

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

标签:闭包,变量,彻底,作用域,JavaScript,num,执行,函数
From: https://blog.csdn.net/weixin_46489412/article/details/142001120

相关文章

  • 彻底理解字节序
    1.基本理论计算机发送数据从内存低地址开始.计算机接收数据的保存从低地址开始.2.非数值型网络数据传输如上图例子所示,发送端发送了四个字节内容,分别为0x12,0x34,0x56,0x78,假设这四个字节不表示数值例如unsignedint,而是图片内容数据。发送端从低内存地址开始发送四个字节,......
  • MASM32+ HTML & JavaScript,好搭档
    哪个编程工具让你的工作效率翻倍?在日益繁忙的工作环境中,选择合适的编程工具已成为提升开发者工作效率的关键。不同的工具能够帮助我们简化代码编写、自动化任务、提升调试速度,甚至让团队协作更加顺畅。那么,哪款编程工具让你的工作效率翻倍?是智能的代码编辑器,强大的版本控制工具,还是......
  • 提升前端性能的JavaScript
    1.代码优化:精简与压缩核心观点:减少文件大小,加快加载速度。深入分析:JavaScript文件的大小是影响页面加载时间的关键因素之一。通过去除代码中的注释、空格、换行符等不必要的字符,以及利用工具如UglifyJS、Terser等进行代码压缩,可以大幅度减少文件体积,进而提升加载速度。案例展示:假设......
  • 详解JavaScript
    目录 JavaScript引入样式 基础语法变量数据类型 运算符JavaScript对象数组数组定义数组操作函数语法格式关于参数个数函数表达式对象JQuery语法 选择器事件常见的事件操作元素获取/设置元素内容 获取/设置元素属性获取/设置CSS属性添加元素删......
  • Javascript应用(下拉框) 笔记17
    一个基础Html框架:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</t......
  • JavaScript学习文档(14):深入对象、内置构造函数、综合案例
    目录一、深入对象1、创建对象三种方式2、构造函数(1)构造函数(2)说明:(3)利用构造函数创建多个对象(4)实例化执行过程3、实例成员和静态成员(1)实例成员:(2)静态成员:二、内置构造函数1、Object2、Array(1)数组常见实例方法-核心方法(2)员工涨薪计算成本案例(3)还有些数组常见方法(4......
  • javascript网页设计案例
    JavaScript在网页设计中扮演着重要的角色,能够实现动态效果和交互功能,提升用户体验。下面,我将通过一个具体的案例——“动态图片轮播”来展示JavaScript在网页设计中的应用。案例:动态图片轮播1.HTML结构<!DOCTYPEhtml><htmllang="zh"><head>  <metacharset="UTF-......
  • 如何彻底关闭Chrome浏览器自动更新
    1.首先找到桌面中GoogleChrome浏览器的图片,鼠标右键打开文件所在的位置2.选择Google目录 选择Update目录右键选择属性右键选择属性点击确定修改成功3.继续第(2)步选择 高级4.点击禁用继承!!!!!!!测试再次点击Update文件夹 弹出`你当前无权访......
  • JavaScript中的Object.freeze()和Object.seal()
    一、Object.freeze()1.简介:Object.freeze()是一个可以将对象冻结的方法。一旦对象被冻结,就不能添加、删除或修改其属性。这在需要确保对象完整性、防止任何意外或故意更改的场景中非常有用constperson={name:'Alice',age:30};Object.freeze(person);p......
  • JavaScript 循环语句
    1. for 循环for循环是最常用的循环结构之一,它适合在循环开始前就知道循环次数的情况。基本语法for(初始化表达式;条件表达式;迭代后表达式){//循环体//这里的代码会在每次迭代时执行}如何工作初始化:首先执行初始化表达式,通常用来设置循环控制变量。条件......