文章目录

  • 一、闭包是什么?
    • 因此得出结论:能够读取其他函数内部变量的函数,就是闭包
  • 二、满足闭包的两个个特征
  • 三、经典案例
  • 四、经典面试题
  • 总结闭包的好处与坏处

一、闭包是什么?

闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?
我们都知道,js的作用域分两种,全局局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外的,内部作用域可以获得当前作用域下的变量并且可以获得当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下通常无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包就是用来解决这一需求的,闭包的本质就是在一个函数内部创建另一个函数

因此得出结论:能够读取其他函数内部变量的函数,就是闭包

二、满足闭包的两个个特征

我们首先要知道闭包有3个特性:

  1. 函数嵌套
  2. 内部函数引用外部函数的变量

可以说,只要满足了以上这两个特征,那么就算闭包

三、经典案例

function a() {var name = '小明'return function() {return name}}var result =  a()
console.log(result()) // '小明'

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

再来看一个闭包的经典例子

function fn() {var num = 3return function() {var n = 0console.log(++n)console.log(++num)}
}
var fn1 = fn()
fn1()  //1 4
fn1()  //1 5

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

四、经典面试题

写一个for循环,让它按顺序打印出当前循环次数

for(var i = 0; i < 5; i++) {setTimeout(function() {console.log(i)},100)
}


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

for(var i = 0; i < 5; i++) {(function(i){setTimeout(function() {console.log(i)},100)})(i)
}


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

总结闭包的好处与坏处

  1. 好处
    ①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突
    ②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)
    ③匿名自执行函数可以减少内存消耗

  2. 坏处
    ①其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;
    ②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响

通俗理解JavaScript闭包相关推荐

  1. 深入理解JavaScript闭包(closure) 【收藏】

    深入理解JavaScript闭包(closure) 原文地址:http://www.felixwoo.com/archives/247  Felix Woo 最近在网上查阅了不少Javascript闭 ...

  2. 让你分分钟理解 JavaScript 闭包

    原文:https://www.cnblogs.com/onepixel/p/5062456.html 让你分分钟理解 JavaScript 闭包 闭包,是 Javascript 比较重要的一个概念,对 ...

  3. 全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...

    全面理解Javascript闭包和闭包的几种写法及用途 好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...

  4. (转)深入理解Javascript闭包(closure)

    深入理解Javascript闭包(closure) 一.什么是闭包?        "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境 ...

  5. 从λ演算到函数式编程聊闭包(2):彻底理解JavaScript闭包规则

    闭包是很多语言都具备的特性,上篇<从抽象代数漫游函数式编程(1):闭包概念再Java/PHP/JS中的定义> 闭包的特性 闭包有三个特性: 函数嵌套函数 函数内部可以引用外部的参数和变量 ...

  6. [转载]深入理解JavaScript闭包(closure)

    最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...

  7. 深入理解Javascript闭包

    收藏 最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开J ...

  8. 【转】深入理解JavaScript闭包(closure)

    文章来源:http://www.felixwoo.com/archives/247 最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说 ...

  9. 全面理解Javascript闭包和闭包的几种写法及用途【转】

    一.什么是闭包和闭包的几种写法和用法 1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...

最新文章

  1. Android WebView与ViewPager的滑动冲突分析
  2. go 1.4支持Android的说明(译文)
  3. Python环境下的数据库编程
  4. call super class will trigger CGLIB
  5. python数学计算模块_Python-NumPy模块数学和统计方法(4)
  6. iPhone 13 Pro系列最新渲染图曝光:小刘海+大尺寸后置相机模组
  7. 使用zabbix监控MongoDB
  8. linux文件控制驱动程序,Linux设备驱动程序学习(6)-高级字符驱动程序操作[(3)设备文件的访问控制]...
  9. OpenGL基础32:面剔除
  10. 安卓开发之软件维护的策略
  11. 66. 查询分页数据
  12. [Java]图书管理系统
  13. 计算机网络原理优秀视频
  14. 月报总结|Moonbeam 7月份大事一览
  15. CAD梦想画图中的“阵列命令”
  16. 【电商】电商后台---商品管理系统
  17. 工图怎么进行三维标注
  18. 算法中的大O是什么意思
  19. 算法小结 之 蛮力法
  20. 需求工程的“拨乱反正”

热门文章

  1. 《C Primer Plus》学习笔记—第14章
  2. 中科院博士论文致谢感人,如果让AI来写又会是怎样
  3. java阻塞线程池_线程池解决阻塞方法
  4. unity TMP文字乱码解决:Unicode Range 16字节汉字对应表
  5. 安卓使用Canvas绘制工作日程表
  6. java错误代码1638_Android studio报: java.lang.ExceptionInInitializerError 错误
  7. 艾瑞咨询:微信5.0带动“天天爱消除”和“打飞机”周边产品热潮
  8. 2021年新规放宽后-摩根大通(JPM)申请全面控制合资公司国内证券业务
  9. 百度辜斯缪谈搜索引擎的未来——实体搜索
  10. 【2018亚太数据中心峰会】辜茂军:绿色智能数据机房技术- 精确送风