資訊專欄INFORMATION COLUMN
摘要：金三銀四搞事季，前端這個(gè)近年的熱門領(lǐng)域，搞事氣氛特別強(qiáng)烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個(gè)搞事轉(zhuǎn)述一下。小偉，你說說這幾行代碼會輸出什么當(dāng)面試官在打出這幾行代碼時(shí)，我竟有點(diǎn)蒙蔽。
金三銀四搞事季，前端這個(gè)近年的熱門領(lǐng)域，搞事氣氛特別強(qiáng)烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個(gè)搞事 boy 轉(zhuǎn)述一下。
以下是我一個(gè)朋友的故事，真的不是我。
for (var i = 0; i < 5; i++) {
console.log(i);
}
“小偉，你說說這幾行代碼會輸出什么？”
當(dāng)面試官在 Sublime 打出這幾行代碼時(shí)，我竟有點(diǎn)蒙蔽。蛤？這不是最簡單的一個(gè)循環(huán)嗎？是不是有陷阱啊，我思索一下，這好像和我看的那個(gè)閉包的題很像啊，這面試官是不是沒寫完啊？有毒啊。
“應(yīng)該是直接輸出 0 到 4 吧...”，我弱弱的說到。
“是啊，別緊張，這題沒啥陷阱，我就是隨便寫一下。”
（Excuse me？面試官你是來搞笑的嗎，嚇?biāo)览献恿耍。?/p>
“那你在看看這幾行代碼會輸出什么？”
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
額，什么鬼，怎么還不是我背了那么多遍的那道閉包題，讓我想想。 setTimeout 會延遲執(zhí)行，那么執(zhí)行到 console.log 的時(shí)候，其實(shí) i 已經(jīng)變成 5 了，對，就是這樣，這么簡單怎么可能難到老子。
“應(yīng)該是開始輸出一個(gè) 5，然后每隔一秒再輸出一個(gè) 5，一共 5 個(gè) 5。”
“對，那應(yīng)該怎么改才能輸出 0 到 4 呢？”
終于到我熟悉的了，加個(gè)閉包就解決了，穩(wěn)！
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}
“很好，那你能說一下，我刪掉這個(gè) i 會發(fā)生什么嗎？”
for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, i * 1000);
})(i);
}
“這樣子的話，內(nèi)部其實(shí)沒有對 i 保持引用，其實(shí)會變成輸出 5。”
“很好，那我給你改一下，你看看會輸出什么？”
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
蛤？什么鬼，這是什么情況，讓我想想。這里給 setTimeout 傳遞了一個(gè)立即執(zhí)行函數(shù)。額，setTimeout 可以接受函數(shù)或者字符串作為參數(shù)，那么這里立即執(zhí)行函數(shù)是個(gè)啥呢，應(yīng)該是個(gè) undefined ，也就是說等價(jià)于：
setTimeout(undefined, ...);
而立即執(zhí)行函數(shù)會立即執(zhí)行，那么應(yīng)該是立馬輸出的。
“應(yīng)該是立馬輸出 0 到 4 吧。”
“哎喲，不錯(cuò)哦，最后一題，你對 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！！！！我想靜靜！
這道題應(yīng)該考察我 JavaScript 的運(yùn)行機(jī)制的，讓我理一下思路。
首先先碰到一個(gè) setTimeout，于是會先設(shè)置一個(gè)定時(shí)，在定時(shí)結(jié)束后將傳遞這個(gè)函數(shù)放到任務(wù)隊(duì)列里面，因此開始肯定不會輸出 1 。
然后是一個(gè) Promise，里面的函數(shù)是直接執(zhí)行的，因此應(yīng)該直接輸出 2 3 。
然后，Promise 的 then 應(yīng)當(dāng)會放到當(dāng)前 tick 的最后，但是還是在當(dāng)前 tick 中。
因此，應(yīng)當(dāng)先輸出 5，然后再輸出 4 。
最后在到下一個(gè) tick，就是 1 。
“2 3 5 4 1”
“好滴，等待下一輪面試吧。”
So easy！媽媽再也不用擔(dān)心我的面試了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93069.html
摘要：一言以蔽之，閉包，你就得掌握。當(dāng)函數(shù)記住并訪問所在的詞法作用域，閉包就產(chǎn)生了。所以閉包才會得以實(shí)現(xiàn)。從技術(shù)上講，這就是閉包。執(zhí)行后，他的內(nèi)部作用域并不會消失，函數(shù)依然保持有作用域的閉包。 網(wǎng)上總結(jié)閉包的文章已經(jīng)爛大街了，不敢說筆者這篇文章多么多么xxx，只是個(gè)人理解總結(jié)。各位看官瞅瞅就好，大神還希望多多指正。此篇文章總結(jié)與《JavaScript忍者秘籍》 《你不知道的JavaScri...
摘要：閉包閉包是什么閉包和匿名函數(shù)在中被引入。可以將匿名函數(shù)和閉包視作相同的概念。閉包和字符串或整數(shù)一樣，是一等值類型。何時(shí)使用我們通常把閉包當(dāng)做函數(shù)和方法的回調(diào)使用。 閉包 閉包是什么？ 1).閉包和匿名函數(shù)在PHP5.3中被引入。2).閉包是指在創(chuàng)建時(shí)封裝函數(shù)周圍狀態(tài)的函數(shù)，即使閉包所在的環(huán)境不存在了，閉包封裝的狀態(tài)依然存在，這一點(diǎn)和Javascript的閉包特性很相似。3).匿名函數(shù)就...
摘要：前言上篇闖關(guān)模式作用域鏈和閉包中任務(wù)四閉包閉包在中是很重要的概念，他們讓出色地完成異步任務(wù)。所以說，作用域，作用域鏈，閉包，垃圾回收機(jī)制，他們都是息息相關(guān)的你的任務(wù)你需要用的來檢驗(yàn)垃圾回收機(jī)制的運(yùn)行。 前言 上篇 【闖關(guān)模式】作用域、鏈和閉包 中 任務(wù)四 閉包(Closures) 閉包在JS中是很重要的概念，他們讓JS出色地完成異步任務(wù)。 為了能更好的理解閉包，我們先來看作用域鏈的例子...
摘要：眾所周知，閉包的一個(gè)作用就是讓一些變量始終保持在內(nèi)存中，在此我用一些實(shí)際代碼對這句話作進(jìn)一步的理解。輸出這個(gè)很好理解，不多說輸出輸出上述代碼中，就是執(zhí)行函數(shù)返回的匿名函數(shù)。 閉包是javascript中繞不開的話題，關(guān)于閉包的一些概念和應(yīng)用，這方面資料比較多，在此就不再贅述。眾所周知，閉包的一個(gè)作用就是 讓一些變量始終保持在內(nèi)存中 ，在此我用一些實(shí)際代碼對這句話作進(jìn)一步的理解。 dem...
摘要：此時(shí)產(chǎn)生了閉包。導(dǎo)致，函數(shù)的活動(dòng)對象沒有被銷毀。是不是跟你想的不一樣其實(shí)，這個(gè)例子重點(diǎn)就在函數(shù)上，這個(gè)函數(shù)的第一個(gè)參數(shù)接受一個(gè)函數(shù)作為回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)并不會立即執(zhí)行，它會在當(dāng)前代碼執(zhí)行完，并在給定的時(shí)間后執(zhí)行。 上一節(jié)說了執(zhí)行上下文，這節(jié)咱們就乘勝追擊來搞搞閉包！頭疼的東西讓你不再頭疼！ 一、函數(shù)也是引用類型的。 function f(){ console.log(not cha...
閱讀 2283·2021-09-30 09:47
閱讀 2210·2021-09-26 09:55
閱讀 2938·2021-09-24 10:27
閱讀 1535·2019-08-27 10:54
閱讀 960·2019-08-26 13:40
閱讀 2486·2019-08-26 13:24
閱讀 2411·2019-08-26 13:22
閱讀 1720·2019-08-23 18:38
