一、關(guān)于javascript

　　javascript是一門單線程語言，在最新的HTML5中提出了Web Worker，但javascript是單線程這一核心仍未改變。

　　為什么js是單線程的語言？因為最初的js是用來在瀏覽器驗證表單操縱DOM元素的。如果js是多線程的話，兩個線程同時對一個DOM進行了相互沖突的操作，那么瀏覽器的解析是無法執(zhí)行的。

　　Web Worker 的作用，就是為 JavaScript 創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建 Worker 線程，將一些任務(wù)分配給后者運行。在主線程運行的同時，Worker 線程在后臺運行，兩者互不干擾。等到 Worker 線程完成計算任務(wù)，再把結(jié)果返回給主線程。

二、javascript事件循環(huán)

　　當(dāng)我們調(diào)用一個方法的時候，js會生成一個與這個方法對應(yīng)的執(zhí)行環(huán)境（context），又叫執(zhí)行上下文。這個執(zhí)行環(huán)境中存在著這個方法的私有作用域，上層作用域的指向，方法的參數(shù)，這個作用域中定義的變量以及這個作用域的this對象。 而當(dāng)一系列方法被依次調(diào)用的時候，因為js是單線程的，同一時間只能執(zhí)行一個方法，于是這些方法被排隊在一個單獨的地方。這個地方被稱為執(zhí)行棧。

　　js引擎遇到一個異步事件后并不會一直等待其返回結(jié)果，而是會將這個事件掛起，繼續(xù)執(zhí)行執(zhí)行棧中的其他任務(wù)。

　　當(dāng)一個異步事件返回結(jié)果后，js會將這個事件加入與當(dāng)前執(zhí)行棧不同的另一個隊列，我們稱之為事件隊列。被放入事件隊列不會立刻執(zhí)行其回調(diào)，而是等待當(dāng)前執(zhí)行棧中的所有任務(wù)都執(zhí)行完畢， 主線程處于閑置狀態(tài)時，主線程會去查找事件隊列是否有任務(wù)。如果有，那么主線程會從中取出排在第一位的事件，并把這個事件對應(yīng)的回調(diào)放入執(zhí)行棧中，然后執(zhí)行其中的同步代碼。如此反復(fù)，這樣就形成了一個無限的循環(huán)。

三、setTimeout

　　setTimeout這個函數(shù)，是經(jīng)過指定時間后，把要執(zhí)行的任務(wù)加入到Event Queue中，又因為是單線程任務(wù)要一個一個執(zhí)行，如果前面的任務(wù)需要的時間太久，那么只能等著。

setTimeout(() => {
 task()
},3000)

sleep(10000000)

上述代碼執(zhí)行task()需要的時間遠(yuǎn)遠(yuǎn)超過3秒，執(zhí)行過程如下：

• task()進入Event Table并注冊,計時開始。
• 執(zhí)行sleep函數(shù)，很慢，非常慢，計時仍在繼續(xù)。
• 3秒到了，計時事件timeout完成，task()進入Event Queue，但是sleep還沒執(zhí)行完，只好等著。
• sleep終于執(zhí)行完了，task()終于從Event Queue進入了主線程執(zhí)行。
  

　　setTimeout(fn,0)的含義是，指定某個任務(wù)在主線程最早可得的空閑時間執(zhí)行，意思就是不用再等多少秒了，只要主線程執(zhí)行棧內(nèi)的同步任務(wù)全部執(zhí)行完成，棧為空就馬上執(zhí)行。

四、setInterval

　 　對于執(zhí)行順序來說，setInterval會每隔指定的時間將注冊的函數(shù)置入Event Queue，如果前面的任務(wù)耗時太久，那么同樣需要等待。

　　唯一需要注意的一點是，對于setInterval(fn,ms)來說，我們已經(jīng)知道不是每過ms秒會執(zhí)行一次fn，而是每過ms秒，會有fn進入Event Queue。

五、Promise與process.nextTick(callback)

　　Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強大。
　　所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。

　　process.nextTick(callback)類似node.js版的"setTimeout"，在事件循環(huán)的下一次循環(huán)中調(diào)用 callback 回調(diào)函數(shù)。

六、宏任務(wù)和微任務(wù)

• macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
• micro-task(微任務(wù))：Promise.then，process.nextTick
  

　　不同類型的任務(wù)會進入對應(yīng)的Event Queue，比如setTimeout和setInterval會進入相同的Event Queue。

　　事件循環(huán)的順序，決定js代碼的執(zhí)行順序。

　　進入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個任務(wù)隊列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。

setTimeout(function() {
 console.log('setTimeout');
})

new Promise(function(resolve) {
 console.log('promise');
}).then(function() {
 console.log('then');
})

console.log('console');

• 這段代碼作為宏任務(wù)，進入主線程。
• 先遇到setTimeout，那么將其回調(diào)函數(shù)注冊后分發(fā)到宏任務(wù)Event Queue。
• 接下來遇到了Promise，new Promise立即執(zhí)行，因為new Promise回調(diào)函數(shù)中的代碼是同步任務(wù)，then函數(shù)分發(fā)到微任務(wù)Event Queue。
• 遇到console.log()，立即執(zhí)行。
• 好啦，整體代碼script作為第一個宏任務(wù)執(zhí)行結(jié)束，看看有哪些微任務(wù)？我們發(fā)現(xiàn)了then在微任務(wù)Event Queue里面，執(zhí)行。
• 第一輪事件循環(huán)結(jié)束了，我們開始第二輪循環(huán)，當(dāng)然要從宏任務(wù)Event Queue開始。我們發(fā)現(xiàn)了宏任務(wù)Event Queue中setTimeout對應(yīng)的回調(diào)函數(shù)，立即執(zhí)行。
• 結(jié)束。

七、async await

1.async 做一件什么事情？

　　帶 async 關(guān)鍵字的函數(shù)，它使得你的函數(shù)的返回值必定是 promise 對象。

　　也就是，如果async關(guān)鍵字函數(shù)返回的不是promise，會自動用 Promise.resolve() 包裝。如果async關(guān)鍵字函數(shù)顯式地返回promise，那就以你返回的promise為準(zhǔn)。

2.await 在等什么？

　　await等的是右側(cè)「表達(dá)式」的結(jié)果。也就是說，右側(cè)如果是函數(shù)，那么函數(shù)的return值就是「表達(dá)式的結(jié)果」。右側(cè)如果是一個 'hello' 或者什么值，那表達(dá)式的結(jié)果就是 'hello'。

3.await 等到之后，做了一件什么事情？

　　await右側(cè)表達(dá)式的結(jié)果，就是await要等的東西。等到之后，對于await來說，分2個情況：

• 不是promise對象
• 是promise對象
  

　　如果不是 promise , await會阻塞后面的代碼，先執(zhí)行async外面的同步代碼，同步代碼執(zhí)行完，再回到async內(nèi)部，把這個非promise的東西，作為 await表達(dá)式的結(jié)果。

　　如果它等到的是一個 promise 對象，await 也會暫停async后面的代碼，先執(zhí)行async外面的同步代碼，等著 Promise 對象 fulfilled，然后把 resolve 的參數(shù)作為 await 表達(dá)式的運算結(jié)果。

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');

• 這段代碼作為宏任務(wù)，進入主線程。
• 先打印出script start。接著執(zhí)行函數(shù)async1。
• 打印出async1 start，執(zhí)行到await，執(zhí)行函數(shù)async2，打印出async2。
• 此時await會阻塞async1后面的代碼，會先執(zhí)行async1外面的同步代碼。
• setTimeout放入事件循環(huán)的宏任務(wù)。接著執(zhí)行到Promise，打印出promise1，promise.then放入事件循環(huán)的微任務(wù)。接著打印script end。
• 現(xiàn)在async1外面的同步代碼執(zhí)行完畢，回到async1內(nèi)部打印出async1 end。
• 整體代碼執(zhí)行完畢，執(zhí)行微任務(wù)promise.then，打印出promise2。
• 最后執(zhí)行宏任務(wù)setTimeout，打印setTimeout。

所以這段代碼的執(zhí)行順序為：script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

以上就是詳解JavaScript 的執(zhí)行機制的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 執(zhí)行機制的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論