一、關于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 執行機制的資料請關注好吧啦網其它相關文章！