摘要：什么是中的調(diào)用棧調(diào)用棧就像是程序當(dāng)前執(zhí)行的日志。當(dāng)函數(shù)執(zhí)行結(jié)束時(shí)，將從調(diào)用棧中出去。了解全局和局部執(zhí)行上下文是掌握作用域和閉包的關(guān)鍵?？偨Y(jié)引擎創(chuàng)建執(zhí)行上下文，全局存儲(chǔ)器和調(diào)用棧。

原文作者：Valentino
原文鏈接：https://www.valentinog.com/blog/js-execution-context-call-stack

我打賭你不知道答案。

編程語(yǔ)言中最基礎(chǔ)的組成部分是什么？

變量和函數(shù)對(duì)嗎？每個(gè)人都可以學(xué)習(xí)這些板塊。

但除了基礎(chǔ)知識(shí)之外還有什么？

在稱自己為中級(jí)（甚至是高級(jí)）Javascript開(kāi)發(fā)人員之前，你應(yīng)該掌握的Javascript的核心是什么？

有很多：Scope(作用域)、Closure(閉包)、Callbacks(回調(diào))、Prototype(原型)等等。

但在深入研究這些概念之前，您至少應(yīng)該了解Javascript引擎的工作原理。

在這篇文章中，我們將介紹每個(gè)Javascript引擎的兩個(gè)基本部分：執(zhí)行上下文和調(diào)用堆棧。

（不要害怕。它比你想象的容易）。

準(zhǔn)備好了嗎？

目錄

你會(huì)學(xué)到什么？

Javascript如何執(zhí)行您的代碼？

Javascript引擎

它是如何工作的？

全局存儲(chǔ)器？

什么是調(diào)用棧？

什么是局部執(zhí)行上下文？

總結(jié)

在這篇文章中你將學(xué)到：

Javascript引擎是如何工作的？

Javascript中執(zhí)行上下文

什么是調(diào)用棧

全局執(zhí)行上下文和局部執(zhí)行上下文之間的區(qū)別

通過(guò)查看Javascript內(nèi)部功能，您將成為更好的Javascript開(kāi)發(fā)人員，即使您無(wú)法掌握每一個(gè)細(xì)節(jié)。

現(xiàn)在，看看下面的代碼：

var num = 2;

function pow(num) {
    return num * num;
}

現(xiàn)在告訴我：你認(rèn)為在瀏覽器里以何種順序執(zhí)行這段代碼？

換句話說(shuō)，如果您是瀏覽器，您將如何閱讀該代碼？

這聽(tīng)起來(lái)很簡(jiǎn)單。

大多數(shù)人認(rèn)為“是的，瀏覽器執(zhí)行功能pow并返回結(jié)果，然后將2分配給num?！?/p>

在接下來(lái)的部分中，您將發(fā)現(xiàn)那些看似簡(jiǎn)單的代碼行背后的機(jī)制。

要了解Javascript如何運(yùn)行您的代碼，我們應(yīng)該遇到第一件可怕的事情：

執(zhí)行上下文

在Javascript中什么是執(zhí)行上下文？

每次在瀏覽器（或Node）中運(yùn)行Javascript時(shí)，引擎都會(huì)執(zhí)行一系列步驟。

其中一個(gè)步驟涉及創(chuàng)建全局執(zhí)行上下文。

什么是引擎？

也就是說(shuō)，Javascript引擎是運(yùn)行Javascript代碼的“引擎”。

如今有兩個(gè)突出的Javascript引擎：Google V8和SpiderMonkey。

V8是Google開(kāi)源的Javascript引擎，在Google Chrome和Nodejs中使用。

SpiderMonkey是Mozilla的JavaScript引擎，用于Firefox。

到目前為止，我們有Javascript引擎和執(zhí)行上下文。

現(xiàn)在是時(shí)候了解它們?nèi)绾螀f(xié)同工作了。

每次運(yùn)行一些Javascript代碼是，引擎都會(huì)創(chuàng)造一個(gè)全局執(zhí)行上下文。

執(zhí)行上下文是一個(gè)比喻的詞，用于描述運(yùn)行Javascript代碼的環(huán)境。

我覺(jué)得你很難想象出這些抽象的東西。

現(xiàn)在將全局執(zhí)行上下文視為一個(gè)框：

讓我們?cè)倏纯次覀兊拇a：

var num = 2;

function pow(num) {
    return num * num;
}

引擎如何讀取該代碼？

這是一個(gè)簡(jiǎn)化版本：

引擎：第一行，它是變量！讓我們將它存儲(chǔ)在全局存儲(chǔ)器中。

引擎：第三行，我看到了一個(gè)函數(shù)聲明。讓我們也把它存儲(chǔ)在全局存儲(chǔ)器中。

引擎：看起來(lái)我已經(jīng)完成了。

如果我再次問(wèn)你：瀏覽器如何“看到”以下代碼，你會(huì)怎么說(shuō)？

是的，它有點(diǎn)自上而下......

正如你所看到的那樣，引擎沒(méi)有運(yùn)行功能pow！

這是一個(gè)函數(shù)聲明，而不是函數(shù)調(diào)用。

上面的代碼將轉(zhuǎn)換為存儲(chǔ)在全局存儲(chǔ)器中的一些值：函數(shù)聲明和變量。

全局存儲(chǔ)器？

我已經(jīng)對(duì)執(zhí)行上下文感到困惑，現(xiàn)在還要問(wèn)我什么是全局存儲(chǔ)器？

接下來(lái)讓我們看看什么是全局存儲(chǔ)器

Javascript引擎也有一個(gè)全局存儲(chǔ)器。

全局內(nèi)存包含全局變量和函數(shù)聲明供以后使用。

如果您閱讀Kyle Simpson的“作用域和閉包”，您可能會(huì)發(fā)現(xiàn)全局存儲(chǔ)器與全局作用域的概念重疊。

實(shí)際上它們是一回事。

這是些很難得概念。

但你現(xiàn)在不應(yīng)該擔(dān)心。

我希望你能理解我們難題的兩個(gè)重要部分。

當(dāng)Javascript引擎運(yùn)行您的代碼時(shí)，它會(huì)創(chuàng)建：

全局執(zhí)行上下文

全局存儲(chǔ)器（也稱為全局作用域或全局變量環(huán)境）

一切都清楚了嗎？

如果我在這一點(diǎn)上，我會(huì)：

寫下一些Javascript代碼

當(dāng)你是引擎時(shí)，一步一步地解析代碼

在執(zhí)行期間創(chuàng)建全局執(zhí)行上下文和全局存儲(chǔ)器的圖形表示

您可以在紙上或使用原型制作工具編寫練習(xí)。

對(duì)于我的小例子，圖片看起來(lái)如下：

在下一節(jié)中，我們將看另一個(gè)可怕的事情：調(diào)用棧。

您是否清楚地了解了執(zhí)行上下文，全局存儲(chǔ)器和Javascript引擎如何組合在一起？

如果沒(méi)有，花時(shí)間查看上一節(jié)。

我們將在我們的難題中介紹另一篇文章：調(diào)用棧。

讓我們首先回顧一下Javascript引擎運(yùn)行代碼時(shí)會(huì)發(fā)生什么。 它創(chuàng)建：

全局執(zhí)行上下文

全局存儲(chǔ)器

除了我們的例子，沒(méi)有更多的事情發(fā)生：

var num = 2;

function pow(num) {
    return num * num;
}

代碼是純粹的值分配。

讓我們更進(jìn)一步。

如果我調(diào)用該函數(shù)會(huì)發(fā)生什么？

var num = 2;

function pow(num) {
    return num * num;
}

var res = pow(num)

有趣的問(wèn)題。

在Javascript中調(diào)用函數(shù)的行為使引擎尋求幫助。

這個(gè)幫助來(lái)自Javascript引擎的朋友：調(diào)用棧。

它聽(tīng)起來(lái)可能并不明顯，但Javascript引擎需要跟蹤發(fā)生的情況。

它依賴于調(diào)用棧。

什么是Javascript中的調(diào)用棧？

調(diào)用棧就像是程序當(dāng)前執(zhí)行的日志。

實(shí)際上它是一個(gè)數(shù)據(jù)結(jié)構(gòu)：堆棧。

調(diào)用棧的工作原理是什么？

不出所料，它有兩種方法：push和pop。

push是將某些東西放入堆棧的行為。

也就是說(shuō)，當(dāng)您在Javascript中運(yùn)行函數(shù)時(shí)，引擎會(huì)將該函數(shù)push到調(diào)用堆棧中。

每個(gè)函數(shù)調(diào)用都被push到調(diào)用棧中。

push的第一件事是main()（或global()），它是Javascript程序執(zhí)行的主要線程。

現(xiàn)在，上一張圖片看起來(lái)像這樣：

pop另一端是從堆棧中刪除某些東西的行為。

當(dāng)函數(shù)執(zhí)行結(jié)束時(shí)，將從調(diào)用棧中pop出去。

我們的調(diào)用棧將如下所示：

現(xiàn)在？您已準(zhǔn)備好從那里掌握每個(gè)Javascript概念。

請(qǐng)看下一部分。

到目前為止，一切似乎都很清楚。

我們知道Javascript引擎創(chuàng)建了一個(gè)全局執(zhí)行上下文和一個(gè)全局存儲(chǔ)器。

然后，當(dāng)您在代碼中調(diào)用函數(shù)時(shí)：

Javascript引擎請(qǐng)求幫助

這個(gè)幫助來(lái)自Javascript引擎的朋友：調(diào)用棧

調(diào)用棧會(huì)跟蹤代碼中調(diào)用的函數(shù)

當(dāng)你在Javascript中運(yùn)行一個(gè)函數(shù)時(shí)，還有另一件事情發(fā)生。

首先，該功能出現(xiàn)在全局執(zhí)行上下文中。

然后，另一個(gè)迷你上下文出現(xiàn)在函數(shù)旁邊：

那個(gè)迷你上下文叫做局部執(zhí)行上下文。

如果您注意到，在上一張圖片中，全局存儲(chǔ)器中會(huì)出現(xiàn)一個(gè)新變量：var res。

變量res的值首先是undefined。

然后，只要pow出現(xiàn)在全局執(zhí)行上下文中，該函數(shù)就會(huì)執(zhí)行并且res將獲取其返回值。

在執(zhí)行階段，創(chuàng)建局部執(zhí)行上下文以保存局部變量。

記住這一點(diǎn)。

了解全局和局部執(zhí)行上下文是掌握作用域和閉包的關(guān)鍵。

Javascript引擎創(chuàng)建執(zhí)行上下文，全局存儲(chǔ)器和調(diào)用棧。但是一旦你調(diào)用一個(gè)函數(shù)，引擎就會(huì)創(chuàng)建一個(gè)局部執(zhí)行上下文。

經(jīng)常被忽視的是，新的開(kāi)發(fā)人員總是將Javascript內(nèi)部視為神秘的東西。

然而，它們是掌握高級(jí)Javascript概念的關(guān)鍵。

如果你學(xué)習(xí)執(zhí)行上下文，全局存儲(chǔ)器和調(diào)用棧，那么Scope，Closures，Callbacks和其他東西將變得輕而易舉。

特別是，理解調(diào)用堆棧是至關(guān)重要的。

一旦你想象它，所有的Javascript將開(kāi)始有意義：你將最終理解為什么Javascript是異步的以及我們?yōu)槭裁葱枰卣{(diào)。