执行这段代码的话,会输出 1
看看这个是闭包吗?
首先apple函数嵌套在fruits里面,满足条件1存在函数嵌套;
其次在apple函数里面对fruits作用域里面的n进行了引用,满足条件2,并且最终的输出正确值1。
但我们注意apple函数的执行却是在fruits函数的作用域里面,我的理解是有闭包的条件,却没有闭包的应用或者说闭包的作用。
修改一下代码,就可以变成闭包,例2 :
function fruits(){
var n = 1;
function apple(){
console.log(n);
}
//返回这个函数apple
return apple;
}
var a = fruits();//执行fruits
//执行a 实际就是执行apple函数
a();
这里对例1稍微做了一些修改,就变成了例2,这例2的代码也同时满足之前讲的闭包条件1和2,存在函数嵌套,apple函数也对n进行了引用,注意:apple函数在fruits函数的最后返回了,那么var a = fruits(); 其实就是让a指向了apple函数,执行a就等于执行apple函数。
执行例2的代码,结果是 1,与例1结果是一样的,我们看语句 a() ,说明apple函数是在fruits函数作用域之外的作用域执行的(这里就是全局window),却能正确的引用到n,这就是闭包的效果。
比较一下例1和例2
=========
在例1中fruits()执行完以后,fruits整个内部作用域会被回收,因为引擎有垃圾回收器来释放不在使用的内存空间。
在例2中fruits()执行完以后,内部作用域会一直存在,因为apple本身在使用这个内部作用域,依然持有对该作用域的引用,所以不会被回收。
其实我们经常使用闭包
==========
只是可能没有太注意而已,在我们写过的代码中肯定有很多闭包的身影,比如定时器、事件监听、ajax请求等很多使用了回调函数的地方,实际上就是在使用闭包,如下例:
例3
function sayHello(name){
setTimeout(function(){
console.log('hello '+name);
},1000)
}
sayHello(‘大帅哥’);
//延时1秒后输出结果:hello 大帅哥
循环中闭包的使用
=========
for(var i=1;i<=10;i++){
setTimeout(function(){
console.log(i);
},i*1000)
}
看到这个段代码,我们的预期是每秒一次,分别输出1-10,但实际上是每秒一次输出11,总共10次11,为什么?
因为setTimeout是延时函数,是会在循环结束以后再执行,循环结束后 i 的值是11,那么每次当然就输出11了。
在循环中的10个函数都对 i 进行了引用,并且他们都用的是同一个 i,比如第一次循环的时候 console.log(i) 此时对 i 的引用是1,但是的当第2次循环的时候i被修改为2了,那么第1次循环对i的引用也是指向这个i的自己也是2,以此类推终止循环终止的时候i是11,而setTimeout里面的回调函数是在循环终止后才执行,所以每次都会是11了。
下面稍作修改就可以达到我们想要的效果
==================
第1种方式(副本的方式):
for(var i=1;i<=10;i++){
(function(){
var j=i
setTimeout(function(){
console.log(j);
},j*1000);
})()
}
就是将循环里面的函数用自执行函数包裹起来,形成自己的作用域,然后在此作用域里面用copy一个副本 j,用来存储 i 的值,这样就可以达到想要的效果:
第2种方式(传参的方式):
for(var i=1;i<=10;i++){
(function(j){
setTimeout(function(){
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
取!(备注:前端)**
[外链图片转存中…(img-RxvR00fj-1711034914720)]
总结
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】