共 5024 字，讀完需 6 分鐘，速讀需 2 分鐘，本文首發于知乎專欄前端周刊。寫在前面，筆者在做面試官這 2 年多的時間內，面試了數百個前端工程師，驚訝的發現，超過 80% 的候選人對下面這道題的回答情況連及格都達不到。這究竟是怎樣神奇的一道面試題？他考察了候選人的哪些能力？對正在讀本文的你有什么啟示？且聽我慢慢道來

不起眼的開始

招聘前端工程師，尤其是中高級前端工程師，扎實的 JS 基礎絕對是必要條件，基礎不扎實的工程師在面對前端開發中的各種問題時大概率會束手無策。在考察候選人 JS 基礎的時候，我經常會提供下面這段代碼，然后讓候選人分析它實際運行的結果：

for (var i = 0; i < 5; i++) { setTimeout(function() {  console.log(new Date, i); }, 1000);}console.log(new Date, i);

這段代碼很短，只有 7 行，我想，能讀到這里的同學應該不需要我逐行解釋這段代碼在做什么吧。候選人面對這段代碼時給出的結果也不盡相同，以下是典型的答案：

A. 20% 的人會快速掃描代碼，然后給出結果：0,1,2,3,4,5；
B. 30% 的人會拿著代碼逐行看，然后給出結果：5,0,1,2,3,4；
C. 50% 的人會拿著代碼仔細琢磨，然后給出結果：5,5,5,5,5,5；

只要你對 JS 中同步和異步代碼的區別、變量作用域、閉包等概念有正確的理解，就知道正確答案是 C，代碼的實際輸出是：

2017-03-18T00:43:45.873Z 52017-03-18T00:43:46.866Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 5

接下來我會追問：如果我們約定，用箭頭表示其前后的兩次輸出之間有 1 秒的時間間隔，而逗號表示其前后的兩次輸出之間的時間間隔可以忽略，代碼實際運行的結果該如何描述？會有下面兩種答案：

A. 60% 的人會描述為：5 -> 5 -> 5 -> 5 -> 5，即每個 5 之間都有 1 秒的時間間隔；
B. 40% 的人會描述為：5 -> 5,5,5,5,5，即第 1 個 5 直接輸出，1 秒之后，輸出 5 個 5；

這就要求候選人對 JS 中的定時器工作機制非常熟悉，循環執行過程中，幾乎同時設置了 5 個定時器，一般情況下，這些定時器都會在 1 秒之后觸發，而循環完的輸出是立即執行的，顯而易見，正確的描述是 B。

如果到這里算是及格的話，100 個人參加面試只有 20 人能及格，讀到這里的同學可以仔細思考，你及格了么？

追問 1：閉包

如果這道題僅僅是考察候選人對 JS 異步代碼、變量作用域的理解，局限性未免太大，接下來我會追問，如果期望代碼的輸出變成：5 -> 0,1,2,3,4，該怎么改造代碼？熟悉閉包的同學很快能給出下面的解決辦法：