js执行问题
金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 boy 转述一下。
以下是我一个朋友的故事,真的不是我。
for (var i = 0; i < 5; i++) {
console.log(i);
}
“小伟,你说说这几行代码会输出什么?”
当面试官在 Sublime 打出这几行代码时,我竟有点蒙蔽。蛤?这不是最简单的一个循环吗?是不是有陷阱啊,我思索一下,这好像和我看的那个闭包的题很像啊,这面试官是不是没写完啊?有毒啊。
“应该是直接输出 0 到 4 吧...”,我弱弱的说到。
“是啊,别紧张,这题没啥陷阱,我就是随便写一下。”
(Excuse me?面试官你是来搞笑的吗,吓死老子了!)
“那你在看看这几行代码会输出什么?”
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
此处补充一下:setTimeout属于宏任务,js会先执行执行栈里的代码,执行完后才会执行微任务列表里的代码,最后才会执行宏任务队列里的代码,而此时i的值已经变为4;
额,什么鬼,怎么还不是我背了那么多遍的那道闭包题,让我想想。 setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,对,就是这样,这么简单怎么可能难到老子。
“应该是开始输出一个 5,然后每隔一秒再输出一个 5,一共 5 个 5。”
“对,那应该怎么改才能输出 0 到 4 呢?”
终于到我熟悉的了,加个闭包就解决了,稳!
此处并不是闭包,而是立即执行的匿名函数。。。
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}
“很好,那你能说一下,我删掉这个 i 会发生什么吗?”
for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
} var a = function() {
setTimeout(function() {
console.log(i);
}, i * 1000);
}
for (var i = ; i < ; i++) {
a(i);}
“这样子的话,内部其实没有对 i 保持引用,其实会变成输出 5。”
“很好,那我给你改一下,你看看会输出什么?”
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
蛤?什么鬼,这是什么情况,让我想想。这里给 setTimeout 传递了一个立即执行函数。额,setTimeout 可以接受函数或者字符串作为参数,那么这里立即执行函数是个啥呢,应该是个 undefined ,也就是说等价于:
setTimeout(undefined, ...);
而立即执行函数会立即执行,那么应该是立马输出的。
“应该是立马输出 0 到 4 吧。”
“哎哟,不错哦,最后一题,你对 Promise 了解吧?”
“还可以吧...”
“OK,那你试试这道题。”
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
WTF!!!!我想静静!
这道题应该考察我 JavaScript 的运行机制的,让我理一下思路。
首先先碰到一个 setTimeout,于是会先设置一个定时,在定时结束后将传递这个函数放到任务队列里面,因此开始肯定不会输出 1 。
然后是一个 Promise,里面的函数是直接执行的,因此应该直接输出 2 3 。
然后,Promise 的 then 应当会放到当前 tick 的最后,但是还是在当前 tick 中。
因此,应当先输出 5,然后再输出 4 。
最后在到下一个 tick,就是 1 。
“2 3 5 4 1”
2=>for 循环=>3=>5=>4=>1
“好滴,等待下一轮面试吧。”
So easy!妈妈再也不用担心我的面试了。
js执行问题的更多相关文章
- js执行跨域请求
//js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...
- Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六(获取 JS 执行结果返回值)
Selenium 获取 JavaScript 返回值非常简单,只需要在 js 脚本中将需要返回的数据 return 就可以,然后通过方法返回 js 的执行结果,方法源码如下所示: /** * Get ...
- js执行过程
正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下,JS在解 ...
- js执行引擎(js解释器)
看字面理解,js执行引擎讲的就是将js代码转化为机器码并执行的过程. 一款 JavaScript 引擎是由 Brendan Eich 在网景的 Navigator 中开发的,它的名字叫做 Spider ...
- 你了解JS执行过程吗?
正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下, ...
- js执行环境相关
Js执行过程 如果一个文档中存在多个代码段 步骤一:读入第一个代码段(js引擎并非一行一行执行,而是一段一段分析执行) 步骤二:做词法分析和语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤 ...
- 深入学习JS执行--单线程的JS
一.介绍 随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在浏览器怎么被执行的,很尴尬.所以,我查阅很多资料来总结JS的执行过程,也分享出来,和大家一起学习. 本篇主要讲单线程的 ...
- 深入学习JS执行--创建执行上下文(变量对象,作用域链,this)
一.介绍 本篇继上一篇深入理解js执行--单线程的JS,这次我们来深入了解js执行过程中的执行上下文. 本篇涉及到的名词:预执行,执行上下文,变量对象,活动对象,作用域链,this等 二.预执行 在上 ...
- js执行函数报错Cannot set property 'value' of null怎么解决?
js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...
- JS学习笔记:(三)JS执行机制
首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...
随机推荐
- Case Study: 技术和商业的结合点在哪里?
如果要制作过去两三年里最火爆的企业级产品创业公司名单,里面一定少不了一家叫做Docker的公司.先别管Docker是做什么的,只要记住这是这几年企业级IT产品里最重要的热点技术,有一半的大型企业已经在 ...
- 8.4Solr API使用(Result Grouping分组查询)
转载请出自出处:http://eksliang.iteye.com/blog/2169458 一.概述 分组统计查询不同于分组统计(Facet),facet只是简单统计记录数,并不能为每组数据返回实际 ...
- java多重转型问题
我们来看一个简单的问题,下面的代码会打印出什么? public class hello { public static void main(String[] args){ System.out.pri ...
- python中for、while循环、if嵌套的使用
1.for循环字符串就是一个有序的字符序列for i in range(5): print(i)定义一个死循环while True: pass2.break和continue肯定需要和 ...
- Kafka学习之路 (三)Kafka的高可用
一.高可用的由来 1.1 为何需要Replication 在Kafka在0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的Partition数据都不可被消费, ...
- windows10 安装 Anaconda 并配置 pytorch1.0
官网下载Anaconda安装包,按步骤安装即可安装完后,打开DOS,或Anaconda自带的Anaconda Prompt终端查看Anaconda已安装的安装包C:\Users\jiangshan&g ...
- HO引擎近况20190110
前两天更新完,挺兴奋 趁着兴奋把虚拟机里面的MACOSX从10.12.6升级到了10.14 然后装XCODE,虽然比较熟悉了,但是架不住慢啊 先下载了一个DMG的镜像文件,用不了,转成ISO也不行 然 ...
- 大数据入门第二十四天——SparkStreaming(二)与flume、kafka整合
前一篇中数据源采用的是从一个socket中拿数据,有点属于“旁门左道”,正经的是从kafka等消息队列中拿数据! 主要支持的source,由官网得知如下: 获取数据的形式包括推送push和拉取pull ...
- 利用Cydia Substrate进行Android HOOK
Cydia Substrate是一个代码修改平台.它可以修改任何主进程的代码,不管是用Java还是C/C++(native代码)编写的.而Xposed只支持HOOK app_process中的java ...
- 20155305《网络对抗》PC平台逆向破解(二)
20155305<网络对抗>PC平台逆向破解(二) shellcode注入 1.shellcode shellcode是一段代码,溢出后,执行这段代码能开启系统shell. 2.构造方法 ...