詳解JavaScript 的執行機制
一、關於javascript
javascript是一門單執行緒語言，在最新的HTML5中提出了Web Worker，但javascript是單執行緒這一核心仍未改變。
為什麼js是單執行緒的語言？因為最初的js是用來在瀏覽器驗證表單操縱DOM元素的。如果js是多執行緒的話，兩個執行緒同時對一個DOM進行了相互衝突的操作，那麼瀏覽器的解析是無法執行的。
Web Worker 的作用，就是為 JavaScript 創造多執行緒環境，允許主執行緒建立 Worker 執行緒，將一些任務分配給後者執行。在主執行緒執行的同時，Worker 執行緒在後臺執行，兩者互不干擾。等到 Worker 執行緒完成計算任務，再把結果返回給主執行緒。
二、javascript事件迴圈
當我們呼叫一個方法的時候，js會生成一個與這個方法對應的執行環境（context），又叫執行上下文。這個執行環境中存在著這個方法的私有作用域，上層作用域的指向，方法的引數，這個作用域中定義的變數以及這個作用域的this物件。 而當一系列方法被依次呼叫的時候，因為js是單執行緒的，同一時間只能執行一個方法，於是這些方法被排隊在一個單獨的地方。這個地方被稱為執行棧。
js引擎遇到一個非同步事件後並不會一直等待其返回結果，而是會將這個事件掛起，繼續執行執行棧中的其他任務。
當一個非同步事件返回結果後，js會將這個事件加入與當前執行棧不同的另一個佇列，我們稱之為事件佇列。被放入事件佇列不會立刻執行其回撥，而是等待當前執行棧中的所有任務都執行完畢， 主執行緒處於閒置狀態時，主執行緒會去查詢事件佇列是否有任務。如果有，那麼主執行緒會從中取出排在第一位的事件，並把這個事件對應的回撥放入執行棧中，然後執行其中的同步程式碼。如此反覆，這樣就形成了一個無限的迴圈。
三、setTimeout
setTimeout這個函式，是經過指定時間後，把要執行的任務加入到Event Queue中，又因為是單執行緒任務要一個一個執行，如果前面的任務需要的時間太久，那麼只能等著。
setTimeout(() => {
task()
},3000)
sleep(10000000)
上述程式碼執行task()需要的時間遠遠超過3秒，執行過程如下：
- task()進入Event Table並註冊,計時開始。
- 執行sleep函式，很慢，非常慢，計時仍在繼續。
- 3秒到了，計時事件timeout完成，task()進入Event Queue，但是sleep還沒執行完，只好等著。
- sleep終於執行完了，task()終於從Event Queue進入了主執行緒執行。
setTimeout(fn,0)的含義是，指定某個任務在主執行緒最早可得的空閒時間執行，意思就是不用再等多少秒了，只要主執行緒執行棧內的同步任務全部執行完成，棧為空就馬上執行。
四、setInterval
對於執行順序來說，setInterval會每隔指定的時間將註冊的函式置入Event Queue，如果前面的任務耗時太久，那麼同樣需要等待。
唯一需要注意的一點是，對於setInterval(fn,ms)來說，我們已經知道不是每過ms秒會執行一次fn，而是每過ms秒，會有fn進入Event Queue。
五、Promise與process.nextTick(callback)
Promise 是非同步程式設計的一種解決方案，比傳統的解決方案——回撥函式和事件——更合理和更強大。
所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。
process.nextTick(callback)類似node.js版的"setTimeout"，在事件迴圈的下一次迴圈中呼叫 callback 回撥函式。
六、巨集任務和微任務
- macro-task(巨集任務)：包括整體程式碼script，setTimeout，setInterval
- micro-task(微任務)：Promise.then，process.nextTick
不同型別的任務會進入對應的Event Queue，比如setTimeout和setInterval會進入相同的Event Queue。
事件迴圈的順序，決定js程式碼的執行順序。
進入整體程式碼(巨集任務)後，開始第一次迴圈。接著執行所有的微任務。然後再次從巨集任務開始，找到其中一個任務佇列執行完畢，再執行所有的微任務。
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
- 這段程式碼作為巨集任務，進入主執行緒。
- 先遇到setTimeout，那麼將其回撥函式註冊後分發到巨集任務Event Queue。
- 接下來遇到了Promise，new Promise立即執行，因為new Promise回撥函式中的程式碼是同步任務，then函式分發到微任務Event Queue。
- 遇到console.log()，立即執行。
- 好啦，整體程式碼script作為第一個巨集任務執行結束，看看有哪些微任務？我們發現了then在微任務Event Queue裡面，執行。
- 第一輪事件迴圈結束了，我們開始第二輪迴圈，當然要從巨集任務Event Queue開始。我們發現了巨集任務Event Queue中setTimeout對應的回撥函式，立即執行。
- 結束。
七、async await
1.async 做一件什麼事情？
帶 async 關鍵字的函式，它使得你的函式的返回值必定是 promise 物件。
也就是，如果async關鍵字函式返回的不是promise，會自動用 Promise.resolve() 包裝。如果async關鍵字函式顯式地返回promise，那就以你返回的promise為準。
2.await 在等什麼？
await等的是右側「表示式」的結果。也就是說，右側如果是函式，那麼函式的return值就是「表示式的結果」。右側如果是一個 'hello' 或者什麼值，那表示式的結果就是 'hello'。
3.await 等到之後，做了一件什麼事情？
await右側表示式的結果，就是await要等的東西。等到之後，對於await來說，分2個情況：
- 不是promise物件
- 是promise物件
如果不是 promise,await會阻塞後面的程式碼，先執行async外面的同步程式碼，同步程式碼執行完，再回到async內部，把這個非promise的東西，作為 await表示式的結果。
如果它等到的是一個 promise 物件，await 也會暫停async後面的程式碼，先執行async外面的同步程式碼，等著 Promise 物件 fulfilled，然後把 resolve 的引數作為 await 表示式的運算結果。
4.示例
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function () {
console.log('setTimeout');
},0);
async1();
new Promise(function (resolve) {
console.log('promise1');
resolve();
}).then(function () {
console.log('promise2');
});
console.log('script end');
- 這段程式碼作為巨集任務，進入主執行緒。
- 先打印出script start。接著執行函式async1。
- 打印出async1 start，執行到await，執行函式async2，打印出async2。
- 此時await會阻塞async1後面的程式碼，會先執行async1外面的同步程式碼。
- setTimeout放入事件迴圈的巨集任務。接著執行到Promise，打印出promise1，promise.then放入事件迴圈的微任務。接著列印script end。
- 現在async1外面的同步程式碼執行完畢，回到async1內部打印出async1 end。
- 整體程式碼執行完畢，執行微任務promise.then，打印出promise2。
- 最後執行巨集任務setTimeout，列印setTimeout。
所以這段程式碼的執行順序為：script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout
以上就是詳解JavaScript 的執行機制的詳細內容，更多關於JavaScript 執行機制的資料請關注我們其它相關文章！