一個經典的javascript面試題的新探索

K_B_Z 發布于2019-08-21 14:35 / 1273人閱讀

摘要：我們在面試中經常會遇到或提出這樣一個問題求下列代碼輸出結果通常來說這個題目的答案是本地主要考察瀏覽器的單線程和機制相關文章已經有很多就不再贅述但是如果在開發者工具中運行結果會是什么本次討論以的開發者工具為例讓我們隨便打開一個網頁敲入代碼觀察

我們在javascript面試中經常會遇到或提出這樣一個問題:
求下列代碼輸出結果

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

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

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

s1;undefined;s2;

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

無論是第一種還是第二種, 都不會有setTimeout的返回值被打印到控制臺里面的情況.
如果在面試中, 面試官通過不同的js調試工具在屏幕上面打印出來的結果實際上是有可能不一樣的.

衍生問題:

var x = 1;這個語句在控制臺里面執行的結果是什么為什么?

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

云服務器 GPU云服務器面試一個php javascript面試 javascript經典教程 javascript經典入門

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87959.html

8道經典JavaScript面試題解析，你真的掌握JavaScript了嗎？

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

taowen 2019-08-26 10:41 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 評論0 收藏0
你不能錯過的前端面試題合集

摘要：收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得及各大互聯網公司前端筆試面試題篇及各大互聯網公司前端筆試面試題篇面試題個和個經典面試題前端開發面試題如何面試前端工程師很重要個變態題解析如何通過餓了么面試輕收集的一些前端面試題從面試題發現不足，進而查漏補缺，比通過面試更難得 1 BAT及各大互聯網公司2014前端筆試面試題--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 評論0 收藏0
【JS必知必會】高階函數詳解與實戰

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

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

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

caikeal 2019-08-26 11:39 評論0 收藏0