一個Promise面試題

原文地址: https://github.com/lzlu/Blog/issues/7

本文沒有什麼乾貨，只是提供了一個面試題的解答思路。

這個題目是以前面試的時候遇到的，當時沒答對。雖然這種題目看起來對寫代碼並沒什麼實際意義，但說到底仍是本身對JS執行機制不夠深刻了解。

就拿這題目拿出來分享給你們一些解題思路。 對JS執行機制不夠了解的建議先看了這篇這一次，完全弄懂 JavaScript 執行機制 - 掘金，再食用。

很少說了，上酸菜，哦不對，題目。

const first = () => (new Promise((resolve,reject)=>{
    console.log(3);
    let p = new Promise((resolve, reject)=>{
         console.log(7);
        setTimeout(()=>{
           console.log(5);
           resolve(6); 
        },0)
        resolve(1);
    }); 
    resolve(2);
    p.then((arg)=>{
        console.log(arg);
    });

}));

first().then((arg)=>{
    console.log(arg);
});
console.log(4);
複製代碼

第一輪事件循環

先執行宏任務，主script ，new Promise當即執行，輸出【3】，執行p這個new Promise 操做，輸出【7】，發現setTimeout，將回調放入下一輪任務隊列（Event Queue），p的then，姑且叫作then1，放入微任務隊列，發現first的then，叫then2，放入微任務隊列。執行console.log(4)，輸出【4】,宏任務執行結束。

再執行微任務，執行then1，輸出【1】，執行then2，輸出【2】。到此爲止，第一輪事件循環結束。開始執行第二輪。

第二輪事件循環

先執行宏任務裏面的，也就是setTimeout的回調，輸出【5】。resovle不會生效，由於p這個Promise的狀態一旦改變就不會在改變了。 因此最終的輸出順序是三、七、四、一、二、5。

總結

對JavaScript執行機制有了解，而且知道Promise構造函數是當即執行的，這個題目相信仍是很簡單的。