有趣的闭包

awesome23 发布于2019-08-22 14:59 / 1934人阅读

摘要：金三银四搞事季，前端这个近年的热门领域，搞事气氛特别强烈，我朋友小伟最近就在疯狂面试，遇到了许多有趣的面试官，有趣的面试题，我来帮这个搞事转述一下。小伟，你说说这几行代码会输出什么当面试官在打出这几行代码时，我竟有点蒙蔽。

金三银四搞事季，前端这个近年的热门领域，搞事气氛特别强烈，我朋友小伟最近就在疯狂面试，遇到了许多有趣的面试官，有趣的面试题，我来帮这个搞事 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 会延迟执行，那么执行到 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);
}

“这样子的话，内部其实没有对 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”

“好滴，等待下一轮面试吧。”

So easy！妈妈再也不用担心我的面试了。

idc机房托管专线服务有趣的事有趣的python 有趣的数据展示 linux有趣的命令

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93069.html

还担心面试官问闭包？

摘要：一言以蔽之，闭包，你就得掌握。当函数记住并访问所在的词法作用域，闭包就产生了。所以闭包才会得以实现。从技术上讲，这就是闭包。执行后，他的内部作用域并不会消失，函数依然保持有作用域的闭包。网上总结闭包的文章已经烂大街了，不敢说笔者这篇文章多么多么xxx，只是个人理解总结。各位看官瞅瞅就好，大神还希望多多指正。此篇文章总结与《JavaScript忍者秘籍》《你不知道的JavaScri...

tinyq 2019-08-21 17:28 评论0 收藏0
PHP新特性之闭包、匿名函数

摘要：闭包闭包是什么闭包和匿名函数在中被引入。可以将匿名函数和闭包视作相同的概念。闭包和字符串或整数一样，是一等值类型。何时使用我们通常把闭包当做函数和方法的回调使用。闭包闭包是什么？ 1).闭包和匿名函数在PHP5.3中被引入。2).闭包是指在创建时封装函数周围状态的函数，即使闭包所在的环境不存在了，闭包封装的状态依然存在，这一点和Javascript的闭包特性很相似。3).匿名函数就...

luzhuqun 2019-06-27 17:07 评论0 收藏0
【闯关模式】作用域、链和闭包下

摘要：前言上篇闯关模式作用域链和闭包中任务四闭包闭包在中是很重要的概念，他们让出色地完成异步任务。所以说，作用域，作用域链，闭包，垃圾回收机制，他们都是息息相关的你的任务你需要用的来检验垃圾回收机制的运行。前言上篇【闯关模式】作用域、链和闭包中任务四闭包(Closures) 闭包在JS中是很重要的概念，他们让JS出色地完成异步任务。为了能更好的理解闭包，我们先来看作用域链的例子...

firim 2019-08-19 18:03 评论0 收藏0
javascript中闭包的一些理解

摘要：众所周知，闭包的一个作用就是让一些变量始终保持在内存中，在此我用一些实际代码对这句话作进一步的理解。输出这个很好理解，不多说输出输出上述代码中，就是执行函数返回的匿名函数。闭包是javascript中绕不开的话题，关于闭包的一些概念和应用，这方面资料比较多，在此就不再赘述。众所周知，闭包的一个作用就是让一些变量始终保持在内存中，在此我用一些实际代码对这句话作进一步的理解。 dem...

lansheng228 2019-08-20 14:46 评论0 收藏0
进击的 JavaScript（四）之闭包

摘要：此时产生了闭包。导致，函数的活动对象没有被销毁。是不是跟你想的不一样其实，这个例子重点就在函数上，这个函数的第一个参数接受一个函数作为回调函数，这个回调函数并不会立即执行，它会在当前代码执行完，并在给定的时间后执行。上一节说了执行上下文，这节咱们就乘胜追击来搞搞闭包！头疼的东西让你不再头疼！一、函数也是引用类型的。 function f(){ console.log(not cha...

Anleb 2019-08-22 18:42 评论0 收藏0