for (var i = 0; i < 5; i++) {
? console.log(i);
}
“小偉,你說說這幾行代碼會輸出什么?”
當(dāng)面試官在 Sublime 打出這幾行代碼時(shí),我竟有點(diǎn)蒙蔽。蛤?這不是最簡單的一個(gè)循環(huán)嗎?是不是有陷阱啊,我思索一下,這好像和我看的那個(gè)閉包的題很像啊,這面試官是不是沒寫完???有毒啊。
“應(yīng)該是直接輸出 0 到 4 吧...”,我弱弱的說到。
“是啊,別緊張,這題沒啥陷阱,我就是隨便寫一下?!?/p>
(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?!?/p>
“對,那應(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?!?/p>
“很好,那我給你改一下,你看看會輸出什么?”
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 吧?!?/p>
“哎喲,不錯哦,最后一題,你對 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”
“好滴,等待下一輪面試吧?!?/p>
So easy!媽媽再也不用擔(dān)心我的面試了。
以上文章,未經(jīng)考證,如有雷同,純屬抄我!
