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是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...
随机推荐
- Asp.net中DataTable的排序功能
DataTable里的数据,如果是从数据库中取得的数据,我们可以用order by排序,而从excel表格取得的数据,就需要自己进行操作了. 例如,Dt_Data2是读取Excel表格取到的数据 Da ...
- linux禁止非法用户试探登录
当我们的linux主机一旦暴露在互联网上,就会遭受到来自网络上的一些非法用户的骚扰.如弱口令扫描,试探性登录:这些行为对linux主机构成一定的威胁.那怎样防范此类的攻击了,这里写了一个脚本,功能就是 ...
- ES6简介之let和const命令解说
一.var申明变量 学习过JavaScript的同学都应该知道,ES5中申明变量使用var,ES5中的var可以说是无所不能的,所有类型的变量都是由var来申明,但往往很多使用者不知道var申明的变量 ...
- intellij IDEA软件java项目No SDK配置jdk开发,安装IDEA软件步骤
我们在使用intellij idea开发java项目的时候,我们在创建的时候会发现提示No SDK,影响创建和使用项目,我们需要下载和配置需要的JDK 电脑 1我们使用intellij idea创建j ...
- PHP+Hadoop+Hive+Thrift+Mysql实现数据统计分析
原址:http://www.cnblogs.com/wicub/p/6094045.html 安装 Hadoop安装: http://www.powerxing.com/install-hadoo ...
- Drools实战系列(三)之eclipse创建工程
web工程和maven工程是目前比较常用的,当然对现在而言,maven工程是开发中最常用的. 两种Drools项目的创建方式,一种是直接创建Drools项目,另一种是基于Maven创建Drools项目 ...
- QGis C++ 开发之图层分类显示
开发环境:Win10 + VS2010 + Qt 4.8.6 + QGis 2.14.4 简单介绍下如何用C++方式实现QGis中图层分类显示的方法. 要实现图层的分类显示主要会用到QgsCatego ...
- Flask 邮件发送
欢迎关注小婷儿的博客: csdn:https://blog.csdn.net/u010986753 博客园:http://www.cnblogs.com/xxtalhr/ 有问题请在博客下留言或加QQ ...
- 几个简单易懂的排序算法php
几个简单易懂的排序算法.排序算法,在应用到解决实际问题的时候(由于不一定总是数字排序),重点要分析出什么时候该交换位置. <?php // 冒泡排序 function bubble_sort(a ...
- 快速在Ubuntu安装PHP网站
快速安装使用的是tasksel,tasksel是Debian / Ubuntu的工具,安装多个相关软件包作为一个协调的“任务”到你的系统.这个lamp-server^跟taskel这个程序有关.下面是 ...