金三银四搞事季,前端这个近年的热门领域,搞事气氛特别强烈,我朋友小伟最近就在疯狂面试,遇到了许多有趣的面试官,有趣的面试题,我来帮这个搞事 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执行问题的更多相关文章

  1. js执行跨域请求

    //js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...

  2. Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六(获取 JS 执行结果返回值)

    Selenium 获取 JavaScript 返回值非常简单,只需要在 js 脚本中将需要返回的数据 return 就可以,然后通过方法返回 js 的执行结果,方法源码如下所示: /** * Get ...

  3. js执行过程

    正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下,JS在解 ...

  4. js执行引擎(js解释器)

    看字面理解,js执行引擎讲的就是将js代码转化为机器码并执行的过程. 一款 JavaScript 引擎是由 Brendan Eich 在网景的 Navigator 中开发的,它的名字叫做 Spider ...

  5. 你了解JS执行过程吗?

        正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下, ...

  6. js执行环境相关

    Js执行过程 如果一个文档中存在多个代码段 步骤一:读入第一个代码段(js引擎并非一行一行执行,而是一段一段分析执行) 步骤二:做词法分析和语法分析,有错则报语法错误(比如括号不匹配等),并跳转到步骤 ...

  7. 深入学习JS执行--单线程的JS

    一.介绍 随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在浏览器怎么被执行的,很尴尬.所以,我查阅很多资料来总结JS的执行过程,也分享出来,和大家一起学习. 本篇主要讲单线程的 ...

  8. 深入学习JS执行--创建执行上下文(变量对象,作用域链,this)

    一.介绍 本篇继上一篇深入理解js执行--单线程的JS,这次我们来深入了解js执行过程中的执行上下文. 本篇涉及到的名词:预执行,执行上下文,变量对象,活动对象,作用域链,this等 二.预执行 在上 ...

  9. js执行函数报错Cannot set property 'value' of null怎么解决?

    js执行函数报错Cannot set property 'value' of null 的解决方案: 原因:dom还没有完全加载 第一步:所以js建议放在body下面执行, 第二步:window.on ...

  10. JS学习笔记:(三)JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

随机推荐

  1. Docker容器学习与分享07

    Docker容器网络 在分享06中学完了bridge网络,接着学习none网络和host网络. Docker在安装时会在host上默认创建三个网络,分别是bridge.host.null. [root ...

  2. SHGetFileInfo 报错 异常 问题

    查看代码是否使用了 ::CoInitializeEx(NULL, COINIT_MULTITHREADED); 如果是,换成在每个线程调用 ::CoInitialize(NULL); 真够蛋疼的,查了 ...

  3. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

  4. [转]vue全面介绍--全家桶、项目实例

    慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”.  ...

  5. CF558E A Simple Task

    题目大意: 给定一个长度不超过10^5的字符串(小写英文字母),和不超过5000个操作. 每个操作 L R K 表示给区间[L,R]的字符串排序,K=1为升序,K=0为降序. 最后输出最终的字符串 首 ...

  6. ethereum/EIPs-170 Contract code size limit

    eip title author type category status created 170 Contract code size limit Vitalik Buterin Standards ...

  7. javascrpt each map

    each方法: 定义一个空数组,通过each方法,往数组添加ID值:最后将数组转换成字符串后,alert这个值: $(function(){ var arr = []; $(":checkb ...

  8. 映众全新游戏内存条发布:单条16GB 最高4000MHz

    近日,显卡与内存厂商映众(INNO3D)推出了一款全新的游戏内存条产品——iCHILL Memory. iCHILL Memory是DDR4内存,单条容量有4GB-16GB可选,内存频率有2400MH ...

  9. JAVA框架 Spring 注解注入

    一.首先需要引入jar包:spring-aop-4.2.4.RELEASE.jar.(在spring解压包libs内). 二.如果注解方式注入依赖的对象,需要引用新的约束. 内的:xsd-config ...

  10. ansible-playbook如何判断并中断执行

    - fail: msg="Bailing out. this play requires 'bar'"       when: bar is not defined 我的需求是当某 ...