一個(gè)經(jīng)典的javascript面試題的新探索

K_B_Z 發(fā)布于2019-08-21 14:35 / 1286人閱讀

摘要：我們?cè)诿嬖囍薪?jīng)常會(huì)遇到或提出這樣一個(gè)問題求下列代碼輸出結(jié)果通常來說這個(gè)題目的答案是本地主要考察瀏覽器的單線程和機(jī)制相關(guān)文章已經(jīng)有很多就不再贅述但是如果在開發(fā)者工具中運(yùn)行結(jié)果會(huì)是什么本次討論以的開發(fā)者工具為例讓我們隨便打開一個(gè)網(wǎng)頁敲入代碼觀察

我們?cè)趈avascript面試中經(jīng)常會(huì)遇到或提出這樣一個(gè)問題:
求下列代碼輸出結(jié)果

setTimeout(function(){console.log(1);},0);
console.log(2);
setTimeout(function(){console.log(3);},0);

通常來說, 這個(gè)題目的答案是2,1,3. 本地主要考察瀏覽器的單線程和event loop機(jī)制, 相關(guān)文章已經(jīng)有很多就不再贅述.
但是如果在開發(fā)者工具中運(yùn)行, 結(jié)果會(huì)是什么?
本次討論以Chrome53.0.2785.116的開發(fā)者工具為例:
讓我們隨便打開一個(gè)網(wǎng)頁, 敲入代碼, 觀察返回結(jié)果

在2之后出現(xiàn)了3307的返回值.
下面我們來解析一下產(chǎn)生這樣結(jié)果的詳細(xì)步驟:
首先對(duì)于輸入, 系統(tǒng)會(huì)做出eval("你所輸入的字符串"), 進(jìn)行一系列動(dòng)作之后, 最后打印eval的返回值.
所以這個(gè)3307就是eval出的返回值.
在這個(gè)eval的執(zhí)行過程中, 首先執(zhí)行第一個(gè)setTimeout, 得到結(jié)果s1,執(zhí)行第二個(gè)console.log方法, 打印2, 并得到返回值undefined, 執(zhí)行第三個(gè)setTimeout,得到結(jié)果s2.
如何得到eval的返回結(jié)果, 即通過下式得到:

s1;undefined;s2;

而該式結(jié)果為從左向右運(yùn)算, 得到s2; 在本次運(yùn)行中, 第三個(gè)setTimeout運(yùn)行結(jié)果為3307, 即該函數(shù)返回值為3307, 具體這個(gè)值的用法可以參見setTimeout和clearTimeout的相關(guān)解釋.
而在正常的代碼中:

無論是第一種還是第二種, 都不會(huì)有setTimeout的返回值被打印到控制臺(tái)里面的情況.
如果在面試中, 面試官通過不同的js調(diào)試工具在屏幕上面打印出來的結(jié)果實(shí)際上是有可能不一樣的.

衍生問題:

var x = 1;這個(gè)語句在控制臺(tái)里面執(zhí)行的結(jié)果是什么為什么?

在控制臺(tái)里面輸入alert(1);到在屏幕上看見alert框, 中間經(jīng)歷了那些步驟?

云服務(wù)器 GPU云服務(wù)器面試一個(gè)php javascript面試 javascript經(jīng)典教程 javascript經(jīng)典入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87959.html

相關(guān)文章

8道經(jīng)典JavaScript面試題解析，你真的掌握JavaScript了嗎？

摘要：瀏覽器的主要組成包括有調(diào)用堆棧，事件循環(huán)，任務(wù)隊(duì)列和。好了，現(xiàn)在有了前面這些知識(shí)，我們可以看一下這道題的講解過程實(shí)現(xiàn)步驟調(diào)用會(huì)將函數(shù)放入調(diào)用堆棧。由于調(diào)用堆棧是空的，事件循環(huán)將選擇回調(diào)并將其推入調(diào)用堆棧進(jìn)行處理。進(jìn)程再次重復(fù)，堆棧不會(huì)溢出。 JavaScript是前端開發(fā)中非常重要的一門語言，瀏覽器是他主要運(yùn)行的地方。JavaScript是一個(gè)非常有意思的語言，但是他有很多一些概念，大...

taowen 2019-08-26 10:41 評(píng)論0 收藏0
你不能錯(cuò)過的前端面試題合集

摘要：收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評(píng)論0 收藏0
你不能錯(cuò)過的前端面試題合集

摘要：收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發(fā)現(xiàn)不足，進(jìn)而查漏補(bǔ)缺，比通過面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評(píng)論0 收藏0
【JS必知必會(huì)】高階函數(shù)詳解與實(shí)戰(zhàn)

摘要：函數(shù)作為參數(shù)情況，，和是中內(nèi)置的高階函數(shù)。知道了到底啊什么是高階函數(shù)，有哪些類型的高階函數(shù)。公眾號(hào)技術(shù)棧路線大家好，我是，公眾號(hào)程序員成長(zhǎng)指北作者，這篇文章是必知必會(huì)系列的高階函數(shù)講解。前言一道經(jīng)典面試題： //JS實(shí)現(xiàn)一個(gè)無限累加的add函數(shù) add(1) //1 add(1)(2) //3 add(1)(2)(3) //6 當(dāng)大家看到這個(gè)面試題的時(shí)候，能否在第一時(shí)間想到...

李昌杰 2019-08-26 10:12 評(píng)論0 收藏0
深入理解js

摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式延遲加載也稱為惰性加載，即在長(zhǎng)網(wǎng)頁中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。詳解 Javascript十大常用設(shè)計(jì)模式力薦~ ...

caikeal 2019-08-26 11:39 評(píng)論0 收藏0