2024年最新彻底理解js闭包并应用，吊打面试官！(1)，字节跳动面试链接

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

}

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(){

console.log(j);

},j*1000);

})(i)

}

将 i 做为实参传入自执行函数中，此时 i 的值会被形参 j 引用，在这个新的作用域里面封闭起来，被回调函数引用，执行代码的话也能得到同样的结果。

第3中方式(let):

for(let i=1;i<=10;i++){

setTimeout(function(){

console.log(i);

},i*1000);

}

因为let在循环的头部，每次迭代都会声明，let有自己的块级作用域。

应用

==

function phone(name){

function call(friend){

console.log(name+" 打电话给 "+friend)

}

function msg(friend){

console.log(name+ " 发短信给 "+friend)

}

return {

call:call,

msg:msg

}

}

var f1 = phone(‘张三’);

f1.call(‘王五’);

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

g:msg

}

}

var f1 = phone(‘张三’);

f1.call(‘王五’);

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-4R3Cerwm-1715751281140)]