JavaScript調用棧

lushan 發布于2019-08-26 10:19 / 768人閱讀

摘要：調用棧是一種棧結構它用來存儲計算機程序執行時候其活躍子程序的信息。調用棧是解析器的一種機制。那是如何處理處理函數的調用關系的答案是調用棧。主線程之外存在一個任務隊列異步任務有了運行結果會在任務隊列之中放置一個任務。

1：基本概念

棧(stack)：用來保存簡單的數據字段。

堆(heap)：用來保存棧中簡單的數據字段對指針的引用。

隊列：是一種先進先出的線性數據結構。

函數的調用的進棧和出棧的順序，遵循先進后出的原則。

空間分配：?堆：一般由程序員釋放，如果程序員不釋放就會在結束時由OS回收；
棧：一般由操作系統自動分配釋放。

緩存方式：堆：存放在二級緩存中，生命周期一般是由虛擬機的垃圾回收算法決定的；
棧：存放在一級緩存中，被調用時處于存儲空間，調用完立即釋放。

操作數據：堆棧（先進后出），隊列（先進先出）。

調用棧是一種棧結構,它用來存儲計算機程序執行時候其活躍子程序的信息。它是一種LIFO的數據結構，將記錄代碼運行時的執行上下文。當遇到某個函數的調用語句時，它將會記錄當前的執行上下文，將函數入棧，并為其創建一個新的執行上下文。（比如什么函數正在執行，什么函數正在被這個函數調用等等信息）。

調用棧是解析器的一種機制。

javascript是一門單線程語言，主線程在同一時間只能處理一件事。那javascript是如何處理處理函數的調用關系的？

答案是——調用棧。

2：Event Loop（事件循環）

JavaScript是一個單線程，它執行的所有代碼都放在下面這個Call Stack里面，當Call Stack執行完畢之后，就會再右側的隊列里面找任務，如果有微任務，就會先執行微任務，再去執行宏任務。

圖片描述

事件循環：就是同步任務進入主線程，異步任務加入到任務隊列中。等主線程的任務執行完就去執行任務隊列中的任務，這個過程會不斷重復。所有同步任務都在主線程上執行，形成一個執行棧。主線程之外, 存在一個任務隊列(task queue), 異步任務有了運行結果會在任務隊列之中放置一個任務。執行棧中的所有同步任務執行完畢后讀取任務隊列(先讀取微任務、宏任務)不斷重復上面的第三步。

js既然是單線程那么肯定是排隊執行代碼，怎么去排這個隊就是Event Loop，雖然js是單線程但是瀏覽器不是單線程。

    console.log("script start");
    
    setTimeout(function() {
        console.log("timeout1");
    }, 10);
    
    new Promise(resolve => {
        console.log("promise1");
        resolve();
        setTimeout(() => console.log("timeout2"), 10);
    }).then(function() {
        console.log("then1")
    })
    
    console.log("script end");
    
    //
    * script start
    * promise1
    * script end
    * then1
    * timeout1
    * timeout2

3：宏任務（Mask-task）

setTimeout

setInterval

I/O

特點：由JavaScript線程外的宿主線程執行，比如，定時器觸發線程setTimeout、setInterval，異步http請求線程。JavaScript線程不空閑宏任務永遠沒有執行機會。

    for(let i=0; i<100000000; i++) {}
    
    setTimeout(function() {
        console.log("setTimeout1");
    }, 1000);
    
    setTimeout(function() {
        console.log("setTimeout2");
    }, 2000);

4：微任務（Mask-task）

promise

特點：由JavaScript線程維護，它的執行時機是在主線程所有可執行代碼執行完成后執行，瀏覽器渲染DOM前會全部執行。

GPU云服務器云服務器調用棧調用棧機制 JS調用棧打印調用棧linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105968.html

[譯文] JavaScript工作原理：引擎、運行時、調用棧概述

摘要：調用棧是單線程編程語言，意味著它只有單一的調用棧。調用棧是一種數據結構，基本記錄了程序運行的位置。舉個例子，先來看如下所示的代碼當引擎開始執行這段代碼時，調用棧將是空的。這正是拋出異常時棧追蹤的構造過程這基本上就是異常拋出時調用棧的狀態。原文 How JavaScript works: an overview of the engine, the runtime, and the c...

PAMPANG 2019-08-23 17:04 評論0 收藏0
前端進階系列(七):什么是執行上下文？什么是調用棧？

摘要：什么是中的調用棧調用棧就像是程序當前執行的日志。當函數執行結束時，將從調用棧中出去。了解全局和局部執行上下文是掌握作用域和閉包的關鍵。總結引擎創建執行上下文，全局存儲器和調用棧。原文作者：Valentino 原文鏈接：https://www.valentinog.com/blog/js-execution-context-call-stack 什么是Javascript中的執行上下文...

leone 2019-08-23 12:18 評論0 收藏0
[譯]JavaScript的調用棧、回調隊列和事件循環

摘要：在這個視頻中，將的調用棧回調隊列和事件循環的內容講的很清晰。調用棧可以往里面放東西，可以在事件結束的時候把回調函數放進回調隊列，然后是事件循環。為的時候這個過程看起來可能不明顯，除非考慮到調用棧的執行環境和事件循環的情況。譯者按這篇文章可以看做是對Philip Roberts 2014年在JSConf演講的《What the heck is the event loop anyway...

YancyYe 2019-08-23 15:16 評論0 收藏0
JavaScript工作機制：第1部分

摘要：工作機制第部分本文轉載自眾成翻譯譯者網絡埋伏紀事鏈接原文隨著越來越受歡迎，開發團隊正在將其用在技術棧的各個方面，包括前端后端混合應用嵌入式設備等等。之后，步驟將是如下這樣調用棧中的每個條目稱為棧幀。 JavaScript工作機制：第1部分本文轉載自：眾成翻譯譯者：網絡埋伏紀事鏈接：http://www.zcfy.cc/article/3965原文：https://blog.sessi...

xiaodao 2019-08-20 18:54 評論0 收藏0
javasctipt 工作原理之調用棧

摘要：譯者注翻譯一個對新手比較友好的工作原理解析系列文章注意以下全部是概念經驗豐富的老鳥可以離場啦正文從這里開始隨著的流行團隊們正在利用來支持多個級別的技術棧包括前端后端混合開發嵌入式設備以及更多這篇文章旨在成為深入挖掘和實際上他是怎么工作的系列譯者注翻譯一個對新手比較友好的 JavaScript 工作原理解析系列文章注意: 以下全部是概念,經驗豐富的老鳥可以離場啦正文從這里開始隨...

Pines_Cheng 2019-08-23 10:38 評論0 收藏0
JavaScript 事件循環（譯文JavaScript Event Loop）

摘要：事件循環了解了在引擎中是如何工作了之后，來看下如何使用異步回調函數來避免代碼。從回調函數被放入后秒鐘，把移到中。由于事件循環持續地監測調用棧是否已空，此時它一注意到調用棧空了，就調用并創建一個新的調用棧。聽多了JavaScript單線程，異步，V8，便會很想去知道JavaScript是如何利用單線程來實現所謂的異步的。我參考了一些文章，了解到一個很重要的詞匯：事件循環(Event L...

K_B_Z 2019-08-20 10:46 評論0 收藏0