把复杂的知识简单化------------------------------------------westlife
引言-----你知道嫦娥为什么那么善变吗??? 因为chang er啊,哈哈哈哈!
纵观js,有三座大山,这三座大山分别为--- 作用域/闭包 , 原型, 异步和单线程.难倒了一代又一代前端小白,小白发挥着愚公移山的精神,挠碎多少头发。伤害了多少神经元。。。。。
今天我来说下我所理解的闭包。
首先闭包产生地条件:有两个。
1.函数嵌套函数
2.变量在外面那个函数声明,在里面呢个函数调用。
给大家看一个例子
function foo(){ var a = 10; return function(){ return ++a }}var c = foo();console.log(c());console.log(c());复制代码
这就是一个简单的闭包,在浏览器调试器下可以看到分别打印了 11 12;
(ps:谢谢热心网友的矫正,错误已经改回来)
那么闭包有什么作用呢?
作用1:保存即将要被销毁的数据
举个小栗子:
大家记得做tab选项卡是怎么做的吗?恩,对,应该很多人都会做,无非就是找按钮的下标,找内容区域的下标,一一对应,for循环遍历按钮,点击按钮时,有事件了,所以产生了异步,for循环的i值不能对应到点击事件的i值,这里我们取巧了,给每个按钮都添加了下标,对应下标的内容区域显示出来,可是,存在一个问题,我们要在按钮组添加一个变量为index,如果我们不想要这个index,我们能不能用其他方法实现呢,答案是我们能,可以用es6的块级作用域来实现,当然我们也可以用闭包来实现
如图:通常实现tab选项卡的方法
利用闭包来实现
(function(){ var wrap = document.querySelector('#wrap'); var pic = document.querySelector('#wrap'); var aBtn = wrap.getElementsByTagName('li'); //获取所有li组 var aPic = pic.getElementsByTagName('div'); //获取所有div组 for(var i = 0;i
是不是很神奇,就用了一个变量i。本来变量i for循环了就变成9(因为事件会产生异步);嘿嘿嘿嘿....利用闭包,巧妙了实现了i值得再次利用
作用2:保密
demo:写一段js代码,实现模拟汽车驾驶证科目一考试,做完一题,显示出答案的效果
想必大家思路是有的,把答案全放进一个数组里,数组的长度和题目的长度一样,数组了存放正确答案,当用户点击按钮时,在旁边显示的出此时此刻这个题目的答案,但是这样数据不安全啊,稍微懂点代码的人在控制台输出答案;怎么做到数据的保密性呢,--闭包
!function(){var aBtn = document.getElementsByClassName('btn');//获取所有按钮var arr = ["A","B","C","A"...........] //存放答案数for(var i = 0;i
就这样写出来了。利用匿名函数/立执行函数,数据不外泄,保密妥妥的,
其实说白了,闭包只是一种垃圾回收机制,有点像我们电脑中的回收站一样。变量声明要被销毁时,利用闭包可以收集即将被销毁的数据。
然后说下异步:上文也提及到了异步;我们的js代码是单线程执行的,从上到下执行;但是异步时候出现时。异步的执行代码会让同步的执行代码有限通过;就好比红绿灯一样,等红灯过去了我们才能通过,异步就是这样,等同步的代码执行完了才会通过,所以,同步总是优先于异步!
触发异步的条件
- ajax
- 事件
- setTimeout() setInterval()
___以上均为本人原创,如有纰漏,望能矫正。