有趣的閉包

awesome23 發布于2019-08-22 14:59 / 2037人閱讀

摘要：金三銀四搞事季，前端這個近年的熱門領域，搞事氣氛特別強烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個搞事轉述一下。小偉，你說說這幾行代碼會輸出什么當面試官在打出這幾行代碼時，我竟有點蒙蔽。

金三銀四搞事季，前端這個近年的熱門領域，搞事氣氛特別強烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個搞事 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！媽媽再也不用擔心我的面試了。

GPU云服務器云服務器有趣的事有趣的python 有趣的數據展示 linux有趣的命令

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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