彻底理解js闭包并应用，吊打面试官！，为什么Flutter能最好地改变移动开发-CSDN博客

本文链接：https://blog.csdn.net/m0_57472099/article/details/136923980

本文解释了JavaScript中的闭包概念，通过例1和例2对比说明闭包的形成条件（函数嵌套和引用外部变量），并探讨了闭包在实际编程中的应用场景，如定时器和事件处理。还讨论了闭包与作用域、垃圾回收的关系以及在循环中的使用问题。

摘要由CSDN通过智能技术生成

执行这段代码的话，会输出 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前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。