通俗理解JavaScript闭包
文章目录
- 一、闭包是什么?
- 因此得出结论:能够读取其他函数内部变量的函数,就是闭包
- 二、满足闭包的两个个特征
- 三、经典案例
- 四、经典面试题
- 总结闭包的好处与坏处
一、闭包是什么?
闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢?
我们都知道,js的作用域
分两种,全局
和局部
,基于我们所熟悉的作用域链相关知识,我们知道在js作用域环境中访问变量的权利是由内向外
的,内部作用域可以获得当前作用域下的变量并且可以获得当前作用域的外层作用域下的变量,反之则不能,也就是说在外层作用域下通常无法获取内层作用域下的变量,同样在不同的函数作用域中也是不能相互访问彼此变量的,那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢?闭包
就是用来解决这一需求的,闭包的本质就是在一个函数内部创建另一个函数。
因此得出结论:能够读取其他函数内部变量的函数,就是闭包
二、满足闭包的两个个特征
我们首先要知道闭包有3个特性:
函数嵌套
内部函数引用外部函数的变量
可以说,只要满足了以上这两个特征,那么就算闭包
三、经典案例
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
总结闭包的好处与坏处
好处
①保护函数内的变量安全 ,实现封装,防止变量流入其他环境发生命名冲突
②在内存中维持一个变量,可以做缓存(但使用多了同时也是一项缺点,消耗内存)
③匿名自执行函数可以减少内存消耗坏处
①其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成内存泄漏,解决方法是可以在使用完变量后手动为它赋值为null;
②其次由于闭包涉及跨域访问,所以会导致性能损失,我们可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
通俗理解JavaScript闭包相关推荐
- 深入理解JavaScript闭包(closure) 【收藏】
深入理解JavaScript闭包(closure) 原文地址:http://www.felixwoo.com/archives/247 Felix Woo 最近在网上查阅了不少Javascript闭 ...
- 让你分分钟理解 JavaScript 闭包
原文:https://www.cnblogs.com/onepixel/p/5062456.html 让你分分钟理解 JavaScript 闭包 闭包,是 Javascript 比较重要的一个概念,对 ...
- 全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...
全面理解Javascript闭包和闭包的几种写法及用途 好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...
- (转)深入理解Javascript闭包(closure)
深入理解Javascript闭包(closure) 一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境 ...
- 从λ演算到函数式编程聊闭包(2):彻底理解JavaScript闭包规则
闭包是很多语言都具备的特性,上篇<从抽象代数漫游函数式编程(1):闭包概念再Java/PHP/JS中的定义> 闭包的特性 闭包有三个特性: 函数嵌套函数 函数内部可以引用外部的参数和变量 ...
- [转载]深入理解JavaScript闭包(closure)
最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开Java ...
- 深入理解Javascript闭包
收藏 最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说别说理解闭包了,就连文字叙述都很难看懂.撰写此文的目的就是用最通俗的文字揭开J ...
- 【转】深入理解JavaScript闭包(closure)
文章来源:http://www.felixwoo.com/archives/247 最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业.对于初学者来说 ...
- 全面理解Javascript闭包和闭包的几种写法及用途【转】
一.什么是闭包和闭包的几种写法和用法 1.什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1. ...
最新文章
- 用 Chiron 运行 IronPython 编写的 Silverlight 程序
- 宏基ec471g黑苹果_宏碁acer ec-471g 黑苹果配置教程
- mybatis的$和#详解分析
- javaScript 面向对象与原型
- [转载] MLDN魔乐科技李兴华主讲Oracle——01 Oracle简介
- 一步步学习java后台(一)(IDEA, Spring, Maven, MyBatis)
- uni-app 简易商城制作
- linux查看字体并安装字体
- matlab 无刷电机,无刷直流电机控制简介
- VB.NET模拟掷骰子
- 农业技术:从能量的角度看农业革命(垄耕种植法)
- t-SNE算法(附Python/R代码)
- 品牌机Windows10重置功能WinRE失效处理方法
- 关于DateTime.Now.Ticks
- 计算机专科学校云南公办,开远计算机科学技术专科学校
- 遗臭万年的“经典”臭诗(转)
- 2020热门编程语言,总有一款适合你【云图智联】
- PS的png图片锁定不能解锁时
- 现在有哪些web前端开发框架呢?
- cms php vue 开源_lucms —— 基于 Vue 和 Laravel 开发的后台管理系统