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是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...
随机推荐
- 解决:Windows 强制升级为8.1之后 Mysql连接不上, VisualSVN Server无服务
1.mysql 连不上,只要将mysql重新加为windows服务即可.(我的是mysql-5.6.24-winx64 解压版) 方法:mysqld --install mysql --defa ...
- MySQL主从复制异步原理以及搭建
MySQL主从复制的原理: 1.首先,MySQL主库在事务提交时会把数据变更作为时间events记录在二进制日志文件binlog中:MySQL主库上的sync_binlog参数控制Binlog日志以什 ...
- xml的xsi:type序列化和反序列化
最近在做HL7V3的对接,关于XML的序列化和反序列化遇到xsi:type的问题解决方法 实体类定义: public class HL7V3_ProviderOrganization { public ...
- Docker容器学习与分享07
Docker容器网络 在分享06中学完了bridge网络,接着学习none网络和host网络. Docker在安装时会在host上默认创建三个网络,分别是bridge.host.null. [root ...
- Django商城项目笔记No.18商品部分-数据表创建
数据库表设计 在电商中对于商品,有两个重要的概念:SPU和SKU SPU = Standard Product Unit (标准产品单位) SPU是商品信息聚合的最小单位,是一组可服用.易检索的标准化 ...
- kubernetes label 标签使用
查看node的标签kubectl get node --show-labels 删除标签kubectl label nodes node5 storagenode- 设置标签kubectl label ...
- Sql注入测试--Sqlmap
慕课网sqlmap学习笔记: 一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令. 例如 (1)在url上 ...
- oracle中over函数
1.oracle中按一个字段分组排序后取第一条数据. SELECT * FROM (SELECT ROW_NUMBER() OVER(PARTITION BY 分组字段 ORDER BY 排序字符 D ...
- 20155232《网络对抗》Exp7 网络欺诈防范
20155232<网络对抗>Exp7 网络欺诈防范 一.实践内容 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法.具体实践有 (1)简单应用SET工具建立冒名网 ...
- # 2017-2018-2 20155319『网络对抗技术』Exp7:网络欺诈防范
2017-2018-2 20155319『网络对抗技术』Exp7:网络欺诈防范 一.原理与实践说明 1.实践目标 本实践的目标是:理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 2. ...