闭包经典面试题

￡神魔★判官ぃ 2022-06-17 02:54 377阅读 0赞

闭包应该是前段面试中经常碰到的面试题，很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念；

首先看面试题：

for (var i = 1; i <= 5; i++) \{

setTimeout( function timer() \{

console.log(i);

\}, 1000 );

\}

上面的代码会输出什么？怎么 改动上述代码，使其依次输出1、2、3、4、5

答案是  程序会先输出一个"5",后面每隔1000毫秒输出一个6，

**setTimeout()相关知识**

在我们学习setTimeout的时候就知道，setTimeout有两个参数，第一个参数是回调函数，第二个参数是毫秒数，表示要执行回调函数所要延迟的时间。但我们还需要知道的是，setTimeout会返回一个Id，即这个定时器的Id，在上面的代码中其实已经创建了5个定时器，但是默认只返回了最后的一个Id，所以会先输出一个5。

**接下来就该讨论为什么会输出5个数字6，而不是1、2、3、4、5了。**

因为setTimeout()函数要等执行完函数调用栈中的代码，然后立即调用定时器。这是因为，我们的定时器都被放在了一个被称为队列的数据结构中，等待上下文的可执行代码运行完毕后，才开始运行定时器，也就是定时器才刚开始计时。所以在定时器的方法执行的时候，变量i已经变成了6，所以输出的全部是6。

**那么怎么样才能输出1、2、3、4、5呢？**

因为5个定时器所打印出来的是同一个i变量，所以想要实现输出不同的数字，就需要把每个定时器所访问的变量独立起来，这就用到了JavaScript的闭包。闭包用途很多，可以很好地区分开各个作用域，避免变量的混淆，但是滥用闭包也会导致性能问题。那么通过下面的修改就可以了；

for (var i = 1; i <= 5; i++) \{

(function(i)\{

setTimeout( function timer() \{

console.log(i);

\},  1000 );

\})(i);

\}

**块级作用域--关键字let**

使用闭包可以得到正确的结果，原因就是改变了i的作用域，那如果我们把循环中的每个setTimeout都独立成一个作用域是不是也能实现同样的结果呢？我们都知道，在JavaScript中，每个函数是一个独立的作用域，但是“\{\}”是不能形成独立作用域的。

在ES6中提出了一个新的关键字let，就可以声明一个仅对当前“\{\}”内部有作用的变量。输出的结果是一样。

for (let i = 1; i <= 5; i++) \{

setTimeout( function timer() \{

console.log(i);

\}, 1000 );

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，377人围观）

还没有评论，来说两句吧...

相关阅读

相关前端面试题：闭包

前段时间一直在投一些中小型公司吧，感觉好久都收不到反馈，也不知道是被淘汰了还是没出结果呢，最近开始投一些大一点的公司准备尝试一下，就在昨天接到面试电话的时候，接受到了滴滴的毒打

小咪咪/ 2023年03月03日 08:55/ 0 赞/ 70 阅读

相关 JavaScript闭包面试经典案例

案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年12月12日 13:41/ 0 赞/ 133 阅读

相关 setTimeout与循环闭包经典面试题详解

我在详细图解作用域链与闭包\[1\]一文中的结尾留下了一个关于setTimeout与循环闭包的思考题。 > 利用闭包，修改下面的代码，让循环输出的结果依次为1， 2， 3，

太过爱你忘了你带给我的痛/ 2022年12月02日 01:14/ 0 赞/ 142 阅读

相关 JavaScript闭包面试题

由工作中演变而来的面试题这是一个我工作当中的遇到的一个问题，似乎很有趣，就当做了一道题去面试，发现几乎没人能全部答对并说出原因，遂拿出来聊一聊吧。先看题目代码：

喜欢ヅ旅行/ 2022年08月20日 11:27/ 0 赞/ 145 阅读

相关闭包经典面试题

闭包应该是前段面试中经常碰到的面试题，很多人都会在这个问题上被问住。如果想要弄清楚就要掌握闭包的概念；首先看面试题： for (var i = 1; i <= 5; i+

￡神魔★判官ぃ/ 2022年06月17日 02:54/ 0 赞/ 378 阅读

相关 javascript闭包经典面试题

> > function fun(n,o) \{ > > > console.log(o) > > > return \{ > > >

怼烎@/ 2022年06月13日 06:30/ 0 赞/ 197 阅读

相关闭包经典问题

function test()\{ var arr = \[\]; for(var i = 0; i <

客官°小女子只卖身不卖艺/ 2022年03月16日 11:44/ 0 赞/ 177 阅读

相关闭包面试题之闭包解决for循环打印

闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的变量,在函数执行完之后依旧保持没有被垃圾回收处理掉 1、正常的for循环打印

刺骨的言语ヽ痛彻心扉/ 2021年10月24日 05:28/ 0 赞/ 462 阅读

相关 js经典闭包题

面试官：会闭包么？ you：木问题！！！面试官：那么做做下面的题吧？ you：。。。（一脸懵逼中...） //经典闭包 functio

妖狐艹你老母/ 2021年09月18日 02:42/ 0 赞/ 304 阅读

相关一篇常做错的经典JS闭包面试题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

布满荆棘的人生/ 2021年07月24日 11:08/ 0 赞/ 341 阅读