快捷導(dǎo)航

詳解JavaScript執(zhí)行模型

更新時間：2020年11月16日 14:38:03 作者：CamWang

這篇文章主要介紹了JavaScript執(zhí)行模型的相關(guān)資料。幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下

JavaScript執(zhí)行模型

引言

JavaScript是一個單線程（Single-threaded）異步（Asynchronous）非阻塞（Non-blocking）并發(fā)（Concurrent）語言，這些語言效果通過一個調(diào)用棧（Call Stack）、一個事件循環(huán)（Event Loop）、一個回調(diào)隊列（Callback Queue）有些時候也叫任務(wù)隊列（Task Queue）與跟運(yùn)行環(huán)境相關(guān)的API組成。

概念

調(diào)用棧 Call Stack

調(diào)用棧是一個LIFO后進(jìn)先出數(shù)據(jù)結(jié)構(gòu)的函數(shù)運(yùn)行棧，它內(nèi)部的數(shù)據(jù)結(jié)構(gòu)為函數(shù)幀。當(dāng)在JavaScript中調(diào)用一個函數(shù)時，它將被壓入棧中，當(dāng)這個函數(shù)內(nèi)部還有另一個函數(shù)被調(diào)用時，另一個函數(shù)將會被壓入棧頂，直到其內(nèi)部沒有更多調(diào)用，棧頂函數(shù)將會被以單線程方式執(zhí)行并出棧，直到最后一個函數(shù)幀出棧。JavaScript語言特性中的單線程就是指的調(diào)用棧的單線程運(yùn)行。

function multiply(a, b) {
 return a * b;
}

function square(n) {
 return multiply(n, n)
}

function printSquare(n) {
 console.log(square(n));
}

printSquare(4);

首先調(diào)用棧壓入main()，掃描到printSquare()函數(shù)調(diào)用調(diào)用棧壓入printSquare(4)，printSquare函數(shù)內(nèi)部調(diào)用square(n)該函數(shù)被壓入棧，同理multiply(n, n)函數(shù)也被壓入棧且沒有更多調(diào)用，JavaScript引擎開始執(zhí)行棧頂函數(shù)multiply(n, n)返回結(jié)果并出棧，以此類推直到main()函數(shù)出棧。

調(diào)用棧有一個意外情況，當(dāng)函數(shù)遞歸調(diào)用其自身時調(diào)用棧將溢出，執(zhí)行環(huán)境將報錯。

function foo() {
 foo();
}
foo();

任務(wù)隊列 Task Queue

任務(wù)隊列是WebAPI的一部分，也就是說它本身并不是ECMAScript標(biāo)準(zhǔn)的一部分，而是運(yùn)行環(huán)境自行實(shí)現(xiàn)的。任務(wù)隊列是所有回調(diào)函數(shù)排隊執(zhí)行的FIFO先進(jìn)先出隊列，它的單位是任務(wù)（Task），每個任務(wù)都關(guān)聯(lián)著一個用于處理這個任務(wù)的回調(diào)函數(shù)。在事件循環(huán)（Event Loop）中會將任務(wù)隊列內(nèi)的函數(shù)壓入調(diào)用棧執(zhí)行并出隊列，直至為空。

任務(wù)隊列在瀏覽器的實(shí)現(xiàn)中被分為了宏任務(wù)隊列（macrotask queue）和微任務(wù)隊列（microtask queue），它們分別個自承載宏任務(wù)（macrotask）和微任務(wù)（microtask）的排隊，其中宏任務(wù)隊列與宏任務(wù)又被默認(rèn)為常規(guī)的任務(wù)隊列與任務(wù)。

當(dāng)調(diào)用棧內(nèi)所有調(diào)用都完成執(zhí)行后，事件輪詢會在每次處理宏任務(wù)隊列的一個宏任務(wù)后處理微任務(wù)隊列的全部微任務(wù)，也就是微任務(wù)基本會在宏任務(wù)處理之前被處理。微任務(wù)處理中間不會被UI或網(wǎng)絡(luò)事件處理被執(zhí)行，微任務(wù)執(zhí)行是連續(xù)的。

會被添加到宏任務(wù)的方法的回調(diào)有：