首先需明白兩點：

1. JS是單執行緒語言
2. JS的Event Loop是JS的執行機制。深入瞭解JS的執行，就等於深入瞭解JS裡的event loop

(1) JS為什麼是單執行緒的？

JS最初被設計用在瀏覽器中，那麼想象一下，如果瀏覽器中的JS是多執行緒的。

場景描述：

那麼現在有2個程序，process1 process2，由於是多程序的JS，所以他們對同一個dom，同時進行操作。 process1 刪除了該dom，而process2 編輯了該dom，同時下達2個矛盾的命令，瀏覽器究竟該如何執行呢？

(2) JS為什麼需要非同步?

場景描述：

如果

(3) JS單執行緒又是如何實現非同步的呢？

既然JS是單執行緒的，只能在一條執行緒上執行，又是如何實現的非同步呢？

是通過的事件迴圈(event loop)，理解了event loop機制，就理解了JS的執行機制。

觀察下面程式碼的執行順序

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

執行結果是：1 3 2

也就是說，setTimeout裡的函式並沒有立即執行，而是延遲了一段時間，滿足一定條件後才去執行的，這類程式碼，我們叫非同步程式碼。

所以，這裡我們首先知道了JS裡的一種分類方式，就是將任務分為：同步任務和非同步任務。

按照這種分類方式:JS的執行機制是：

• 首先判斷JS是同步還是非同步，同步就進入主程序，非同步就進入event table
• 非同步任務在event table中註冊函式，當滿足觸發條件後，被推入event queue
• 同步任務進入主執行緒後一直執行，直到主執行緒空閒時，才會去event queue中檢視是否有可執行的非同步任務，如果有就推入主程序中

以上三步迴圈執行，這就是event loop。

所以上面的例子執行過程如下：

• console.log(1) 是同步任務，放入主執行緒裡
• setTimeout() 是非同步任務，被放入event table， 0秒之後被推入event queue裡
• console.log(3) 是同步任務，放到主執行緒裡

當 1、 3在控制檯列印後，主執行緒去event queue(事件佇列)裡檢視是否有可執行的函式，執行setTimeout裡的函式

	setTimeout(function(){
	     console.log('定時器開始啦')
	 });
	
	newPromise(function(resolve){
	     console.log('馬上執行for迴圈啦');
     for(var i = 0; i <10000; i++){
	         i == 99&& resolve();
     }
	 }).then(function(){
     console.log('執行then函式啦')
 });

 console.log('程式碼執行結束');

嘗試按照，上文我們剛學到的JS執行機制去分析：

• setTimeout 是非同步任務，被放到event table
• new Promise 是同步任務，被放到主程序裡，直接執行列印 console.log('馬上執行for迴圈啦')
• .then 裡的函式是非同步任務，被放到event table
• console.log('程式碼執行結束') 是同步程式碼，被放到主程序裡，直接執行

所以，結果是： 馬上執行for迴圈啦---程式碼執行結束---定時器開始啦---執行then函式啦嗎?

結果居然不是這樣，而是： 馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦

那麼，難道是非同步任務的執行順序，不是前後順序，而是另有規定？事實上，按照非同步和同步的劃分方式，並不準確。

而準確的劃分方式是：

• macro-task(巨集任務)：包括整體程式碼script，setTimeout，setInterval
• micro-task(微任務)：Promise，process.nextTick

按照這種分類方式，JS的執行機制是：

• 執行一個巨集任務，過程中如果遇到微任務，就將其放到微任務的“事件佇列”裡
• 當前巨集任務執行完成後，會檢視微任務的“事件佇列”，並將裡面全部的微任務依次執行完
• 重複以上2步驟，就是更為準確的JS執行機制了

嘗試按照剛學的執行機制，去分析上例：

• 首先執行script下的巨集任務，遇到setTimeout,將其放到巨集任務的“佇列”裡
• 遇到 new Promise直接執行，列印"馬上執行for迴圈啦"
• 遇到then方法，是微任務，將其放到微任務的“佇列”裡。
• 列印 "程式碼執行結束"
• 本輪巨集任務執行完畢，檢視本輪的微任務，發現有一個then方法裡的函式，列印"執行then函式啦"
• 到此,本輪的event loop 全部完成。
• 下一輪的迴圈裡，先執行一個巨集任務，發現巨集任務的“佇列”裡有一個setTimeout裡的函式,執行列印"定時器開始啦"

所以最後的執行順序是： 馬上執行for迴圈啦---程式碼執行結束---執行then函式啦---定時器開始啦

這段setTimeout程式碼什麼意思? 我們一般說: 3秒後,會執行setTimeout裡的那個函式

setTimeout(function(){
	    console.log('執行了')
 },3000)

但是這種說並不嚴謹，準確的解釋是：3秒後，setTimeout裡的函式被會推入event queue，而event queue(事件佇列)裡的任務，只有在主執行緒空閒時才會執行。