資訊專欄INFORMATION COLUMN
摘要：什么是中的調用棧調用棧就像是程序當前執行的日志。當函數執行結束時，將從調用棧中出去。了解全局和局部執行上下文是掌握作用域和閉包的關鍵。總結引擎創建執行上下文，全局存儲器和調用棧。
原文作者：Valentino 原文鏈接：https://www.valentinog.com/blog/js-execution-context-call-stack什么是Javascript中的執行上下文？
我打賭你不知道答案。
編程語言中最基礎的組成部分是什么？
變量和函數對嗎？每個人都可以學習這些板塊。
但除了基礎知識之外還有什么？
在稱自己為中級（甚至是高級）Javascript開發人員之前，你應該掌握的Javascript的核心是什么？
有很多：Scope(作用域)、Closure(閉包)、Callbacks(回調)、Prototype(原型)等等。
但在深入研究這些概念之前，您至少應該了解Javascript引擎的工作原理。
在這篇文章中，我們將介紹每個Javascript引擎的兩個基本部分：執行上下文和調用堆棧。
（不要害怕。它比你想象的容易）。
準備好了嗎？
目錄
你會學到什么？
Javascript如何執行您的代碼？
Javascript引擎
它是如何工作的？
全局存儲器？
什么是調用棧？
什么是局部執行上下文？
總結
你會學到什么？在這篇文章中你將學到：
Javascript引擎是如何工作的？
Javascript中執行上下文
什么是調用棧
全局執行上下文和局部執行上下文之間的區別
Javascript如何執行您的代碼?通過查看Javascript內部功能，您將成為更好的Javascript開發人員，即使您無法掌握每一個細節。
現在，看看下面的代碼：
var num = 2;
function pow(num) {
return num * num;
}
現在告訴我：你認為在瀏覽器里以何種順序執行這段代碼？
換句話說，如果您是瀏覽器，您將如何閱讀該代碼？
這聽起來很簡單。
大多數人認為“是的，瀏覽器執行功能pow并返回結果，然后將2分配給num。”
在接下來的部分中，您將發現那些看似簡單的代碼行背后的機制。
Javascript引擎要了解Javascript如何運行您的代碼，我們應該遇到第一件可怕的事情：
執行上下文
在Javascript中什么是執行上下文？
每次在瀏覽器（或Node）中運行Javascript時，引擎都會執行一系列步驟。
其中一個步驟涉及創建全局執行上下文。
什么是引擎？
也就是說，Javascript引擎是運行Javascript代碼的“引擎”。
如今有兩個突出的Javascript引擎：Google V8和SpiderMonkey。
V8是Google開源的Javascript引擎，在Google Chrome和Nodejs中使用。
SpiderMonkey是Mozilla的JavaScript引擎，用于Firefox。
到目前為止，我們有Javascript引擎和執行上下文。
現在是時候了解它們如何協同工作了。
它是如何工作的？每次運行一些Javascript代碼是，引擎都會創造一個全局執行上下文。
執行上下文是一個比喻的詞，用于描述運行Javascript代碼的環境。
我覺得你很難想象出這些抽象的東西。
現在將全局執行上下文視為一個框：
讓我們再看看我們的代碼：
var num = 2;
function pow(num) {
return num * num;
}
引擎如何讀取該代碼？
這是一個簡化版本：
引擎：第一行，它是變量！讓我們將它存儲在全局存儲器中。
引擎：第三行，我看到了一個函數聲明。讓我們也把它存儲在全局存儲器中。
引擎：看起來我已經完成了。
如果我再次問你：瀏覽器如何“看到”以下代碼，你會怎么說？
是的，它有點自上而下......
正如你所看到的那樣，引擎沒有運行功能pow！
這是一個函數聲明，而不是函數調用。
上面的代碼將轉換為存儲在全局存儲器中的一些值：函數聲明和變量。
全局存儲器？
我已經對執行上下文感到困惑，現在還要問我什么是全局存儲器？
接下來讓我們看看什么是全局存儲器
全局存儲器Javascript引擎也有一個全局存儲器。
全局內存包含全局變量和函數聲明供以后使用。
如果您閱讀Kyle Simpson的“作用域和閉包”，您可能會發現全局存儲器與全局作用域的概念重疊。
實際上它們是一回事。
這是些很難得概念。
但你現在不應該擔心。
我希望你能理解我們難題的兩個重要部分。
當Javascript引擎運行您的代碼時，它會創建：
全局執行上下文
全局存儲器（也稱為全局作用域或全局變量環境）
一切都清楚了嗎？
如果我在這一點上，我會：
寫下一些Javascript代碼
當你是引擎時，一步一步地解析代碼
在執行期間創建全局執行上下文和全局存儲器的圖形表示
您可以在紙上或使用原型制作工具編寫練習。
對于我的小例子，圖片看起來如下：
在下一節中，我們將看另一個可怕的事情：調用棧。
什么是調用棧？您是否清楚地了解了執行上下文，全局存儲器和Javascript引擎如何組合在一起？
如果沒有，花時間查看上一節。
我們將在我們的難題中介紹另一篇文章：調用棧。
讓我們首先回顧一下Javascript引擎運行代碼時會發生什么。 它創建：
全局執行上下文
全局存儲器
除了我們的例子，沒有更多的事情發生：
var num = 2;
function pow(num) {
return num * num;
}
代碼是純粹的值分配。
讓我們更進一步。
如果我調用該函數會發生什么？
var num = 2;
function pow(num) {
return num * num;
}
var res = pow(num)
有趣的問題。
在Javascript中調用函數的行為使引擎尋求幫助。
這個幫助來自Javascript引擎的朋友：調用棧。
它聽起來可能并不明顯，但Javascript引擎需要跟蹤發生的情況。
它依賴于調用棧。
什么是Javascript中的調用棧？
調用棧就像是程序當前執行的日志。
實際上它是一個數據結構：堆棧。
調用棧的工作原理是什么？
不出所料，它有兩種方法：push和pop。
push是將某些東西放入堆棧的行為。
也就是說，當您在Javascript中運行函數時，引擎會將該函數push到調用堆棧中。
每個函數調用都被push到調用棧中。
push的第一件事是main()（或global()），它是Javascript程序執行的主要線程。
現在，上一張圖片看起來像這樣：
pop另一端是從堆棧中刪除某些東西的行為。
當函數執行結束時，將從調用棧中pop出去。
我們的調用棧將如下所示：
現在？您已準備好從那里掌握每個Javascript概念。
請看下一部分。
局部執行上下文到目前為止，一切似乎都很清楚。
我們知道Javascript引擎創建了一個全局執行上下文和一個全局存儲器。
然后，當您在代碼中調用函數時：
Javascript引擎請求幫助
這個幫助來自Javascript引擎的朋友：調用棧
調用棧會跟蹤代碼中調用的函數
當你在Javascript中運行一個函數時，還有另一件事情發生。
首先，該功能出現在全局執行上下文中。
然后，另一個迷你上下文出現在函數旁邊：
那個迷你上下文叫做局部執行上下文。
如果您注意到，在上一張圖片中，全局存儲器中會出現一個新變量：var res。
變量res的值首先是undefined。
然后，只要pow出現在全局執行上下文中，該函數就會執行并且res將獲取其返回值。
在執行階段，創建局部執行上下文以保存局部變量。
記住這一點。
了解全局和局部執行上下文是掌握作用域和閉包的關鍵。
總結Javascript引擎創建執行上下文，全局存儲器和調用棧。但是一旦你調用一個函數，引擎就會創建一個局部執行上下文。
經常被忽視的是，新的開發人員總是將Javascript內部視為神秘的東西。
然而，它們是掌握高級Javascript概念的關鍵。
如果你學習執行上下文，全局存儲器和調用棧，那么Scope，Closures，Callbacks和其他東西將變得輕而易舉。
特別是，理解調用堆棧是至關重要的。
一旦你想象它，所有的Javascript將開始有意義：你將最終理解為什么Javascript是異步的以及我們為什么需要回調。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98295.html
摘要：執行上下文可以理解為當前代碼的執行環境，它會形成一個作用域。棧底永遠都是全局上下文，而棧頂就是當前正在執行的上下文。我們用來表示處理執行上下文組的堆棧。因此第三步是的執行上下文入棧。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000008315046);我們在JS學習初期或者面試的時候常常會遇到考核變量提升的思考...
摘要：不過其實簡書文章評論里有很多大家的問題以及解答，對于進一步理解文中知識幫助很大的，算是有點可惜吧。不過也希望能夠對正在學習前端的你有一些小幫助。如果在閱讀中發現了一些錯誤，請在評論里告訴我，我會及時更改。 前端基礎進階（一）：內存空間詳細圖解 前端基礎進階（二）：執行上下文詳細圖解 前端基礎進階（三）：變量對象詳解 前端基礎進階（四）：詳細圖解作用域鏈與閉包 前端基礎進階（五）：全方位...
摘要：使用上一篇文章的例子來說明下自由變量進階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數，也不是局部變量，所以是自由變量。 （關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導） 本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第7天。 本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計...
摘要：文章分享持續更新更多資源請文章轉自一前端文章基礎篇，，前端基礎進階一內存空間詳細圖解前端基礎進階二執行上下文詳細圖解前端基礎進階三變量對象詳解前端基礎進階四詳細圖解作用域鏈與閉包前端基礎進階五全方位解讀前端基礎進階六在開發者工具中觀察函數調 文章分享（持續更新） 更多資源請Star：https://github.com/maidishike... 文章轉自：https://gith...
摘要：一棧數據結構與不同，中并沒有嚴格意義上區分棧內存與堆內存。引用數據類型的值是保存在堆內存中的對象。不允許直接訪問堆內存中的位置，因此我們不能直接操作對象的堆內存空間。為了更好的搞懂變量對象與堆內存，我們可以結合以下例子與圖解進行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...
閱讀 3088·2021-09-22 15:20
閱讀 2608·2019-08-30 15:54
閱讀 1973·2019-08-30 14:06
閱讀 3122·2019-08-30 13:05
閱讀 2467·2019-08-29 18:36
閱讀 578·2019-08-29 15:10
閱讀 533·2019-08-29 11:17
閱讀 830·2019-08-28 18:11
