一道js面试题_网站前端开发_前端开发者

网站前端开发_前端开发者丨JavaScript 资源

https://www.rokub.com

试题如下:

结果是:0 1 2 3 3 3

很多公司面试都爱出这道题,此题考察的知识点还是蛮多的。
为了防止初学者栽在此问题上,此文稍微分析一下。
都考察了那些知识点呢?
异步、作用域、闭包,你没听错,是闭包。
我们来简化此题:

先打印2,后打印1。
因为是 setTimeout 是异步的。
正确的理解 setTimeout 的方式:
有两个参数,第一个参数是函数,第二参数是时间值。
调用setTimeout时,把函数参数,放到事件队列中。等主程序运行完,再调用。
没啥不好理解的。就像我们给按钮绑定事件一样:

这么写完,会弹出1吗。不会!!只是绑定事件而已!
必须等我们去触发事件,比如去点击这个按钮,才会弹出1。
setTimeout也是这样的!只是绑定事件,等主程序运行完毕后,再去调用。
setTimeout的时间值是怎么回事呢?
比如:

setTimeout(fn, 2000)

我们可以理解为2000之后,再放入事件队列中,如果此时队列为空,那么就直接调用 fn。如果前面还有其他的事件,那就等待。
因此 setTimeout 是一个约会从来都不准时的童鞋。
继续看:

程序会不会报错?
不会!而且还会准确得打印1。
为什么?
因为真正去执行 console.log(i) 这句代码时,var i = 1 已经执行完毕了!
所以我们进行 dom 操作。可以先绑定事件,然后再去写其他逻辑。

这么写,完全是可以的。因为异步!

es5中是没有块级作用域的

也就说i可以在for循环体外访问到。所以是没有块级作用域。
但此问题在es6里终结了,因为es6,发明了let。

这回我们再来看看原题。
原题使用了 for 循环。循环的本质是干嘛的?
是为了方便我们程序员,少写重复代码。
让我们倒退50年,原题等价于:

因为 setTimeout 是注册事件。根据前面的讨论,可以都放在后面。
原题又等价于如下的写法:

这回你明白了为啥结果是0 1 2 3 3 3了吧。

那个,老姚你说它是闭包,又是怎么回事?
为了很好的说明白这个事情,我们把它放到一个函数中:

上面的函数跟我们常见另一个例子(div绑定事件)有什么区别:

点击每个div都会弹出3。道理是一样的。因为 alert(i) 中的 ifn 作用越中的,因而这是闭包。
《javascript忍者秘籍》书里把一个函数能调用全局变量,也称闭包。
因为作者认为全局环境也可以想象成一个大的顶级函数。
怎么保证能弹出 0,1,2 呢。
解决之道:以毒攻毒!
再创建个闭包!!

或者如下的写法:

因此原题如果也想 setTimeout 也弹出 0,1,2 的话,改成如下:

网站前端开发_前端开发者丨JavaScript 资源

https://www.rokub.com

» 本文来自:前端开发者 » 《一道js面试题_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2500.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!