js運行機制及異步編程（一）

wudengzan 發布于2019-08-02 16:07 / 2470人閱讀

摘要：引擎的運行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發。為了提高運行速度，現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯，用到哪一行就編譯哪一行，并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。

相信大家在面試的過程中經常遇到查看執行順序的問題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實這些問題最終還是考察大家對js的運行機制是否掌握牢固，對promise，async的原理是否掌握，萬變不離其宗，這次就來徹底搞懂它。

1 js引擎的運行原理

js引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發。從頭到尾負責整個JavaScript程序的編譯及執行過程

瀏覽器在渲染的過程中，首先按順序加載由

首先，進入全局環境，就會先進行預處理，然創建全局上下文執行環境（Global  ExecutionContext），會對var聲明的變量和函數聲明進行預處理，window對象就是全局執行上下文的變量對象，所有的變量和函數都是window對象的屬性方法。所以函數聲明提前和變量聲明提升是在創建變量對象中進行的，且函數聲明優先級高于變量聲明。然后推入stack棧中。預處完成之后，開始執行js
當執行bar()時，就會進入bar函數運行環境，就會先進行預處理，創建bar函數執行上下文（bar Execution Context），推入stack棧中，預處理完后，開始執行foo()
在bar函數內部調用foo函數，則再進入foo函數運行環境，創建foo函數執行上下文（foo Execution Context），推入stack棧中
此刻棧底是全局執行上下文（Global Execution Context），棧頂是foo函數執行上下文（foo Execution Context），如上圖，由于foo函數內部沒有再調用其他函數，那么則開始出棧
foo函數執行完畢后，棧頂foo函數執行上下文（foo Execution Context）首先出棧
bar函數執行完畢，bar函數執行上下文（bar Execution Context）出棧
Global Execution Context則在瀏覽器或者該標簽頁關閉時出棧。

1.2.3 執行上下文

分析一段簡單的代碼，幫助我們理解創建執行上下文的過程，如下：
function fun(a, b) {
    var num = 1;

    function test() {

        console.log(num)

    }
}

fun(2, 3)
這里我們在全局環境調用fun函數，創建fun執行上下文，這里為了方便大家理解，暫時不講解作用域鏈以及this指向，如下：
funEC = {
    //變量對象
    VO: {
        //arguments對象
        arguments: {
            a: undefined,
            b: undefined,
            length: 2
        },

        //test函數
        test: , 

        //num變量
        num: undefined
    },

    //作用域鏈
    scopeChain:[],

    //this指向
    this: window
}

funEC表示fun函數的執行上下文（fun Execution Context簡寫為funEC）
funE的變量對象中arguments屬性，上面的寫法僅為了方便大家理解，但是在瀏覽器中展示是以類數組的方式展示的
表示test函數在堆內存地址的引用

注：創建變量對象發生在預編譯階段，但尚未進入執行階段，該變量對象都是不能訪問的，因為此時的變量對象中的變量屬性尚未賦值，值仍為undefined，只有進入執行階段，變量對象中的變量屬性進行賦值后，變量對象（Variable
Object）轉為活動對象（Active Object）后，才能進行訪問，這個過程就是VO –> AO過程。
建立作用域鏈
作用域鏈由當前執行環境的變量對象（未進入執行階段前）與上層環境的一系列活動對象組成，它保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。
理清作用域鏈可以幫助我們理解js很多問題包括閉包問題等，下面我們結合一個簡單的例子來理解作用域鏈，如下：
var num = 30;

function test() {
    var a = 10;

    function innerTest() {
        var b = 20;

        return a + b
    }

    innerTest()
}

test()
在上面的例子中，當執行到調用innerTest函數，進入innerTest函數環境。全局執行上下文和test函數執行上下文已進入執行階段，innerTest函數執行上下文在預編譯階段創建變量對象，所以他們的活動對象和變量對象分別是AO(global)，AO(test)和VO(innerTest)，而innerTest的作用域鏈由當前執行環境的變量對象（未進入執行階段前）與上層環境的一系列活動對象組成，如下：
innerTestEC = {

    //變量對象
    VO: {b: undefined}, 

    //作用域鏈
    scopeChain: [VO(innerTest), AO(test), AO(global)],  
    
    //this指向
    this: window
}
在這里我們順便思考一下，什么是閉包？
我們先看下面一個簡單例子，如下：
function foo() {
    var num = 20;

    function bar() {
        var result = num + 20;

        return result
    }

    bar()
}

foo()
我這里直接以瀏覽器解析，以瀏覽器理解的閉包為準來分析閉包，如下圖：

如上圖所示，chrome瀏覽器理解閉包是foo，那么按瀏覽器的標準是如何定義閉包的，我總結為三點：

在函數內部定義新函數
新函數訪問外層函數的局部變量，即訪問外層函數環境的活動對象屬性
新函數執行，創建新的函數執行上下文，外層函數即為閉包

確定this指向
在全局環境下，全局執行上下文中變量對象的this屬性指向為window；函數環境下的this指向卻較為靈活，需根據執行環境和執行方法確定

云服務器 GPU云服務器 js異步編程異步機制 JavaScript異步機制異步模塊加載機制-amd

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

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

js運行機制及異步編程（二）

摘要：的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務，異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是，而的出現及普及，又有了新的概念，，它的出現，進一步，中分為兩種任務類型和，在中，稱為，可稱為。上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環Event loop，以及異步編程的原理事件循環Event loop 之前文章...

nifhlheimr 2019-08-02 14:00 評論0 收藏0
js運行機制及異步編程（二）

摘要：的執行機制就是一個主線程一個任務隊列。同步任務就是放在主線程上執行的任務，異步任務就是放在任務隊列的任務。和上述運行的機制主要說明的是，而的出現及普及，又有了新的概念，，它的出現，進一步，中分為兩種任務類型和，在中，稱為，可稱為。上一篇文章主要整理了一下js引擎是如何工作的，這篇文章主要整理js的事件循環Event loop，以及異步編程的原理事件循環Event loop 之前文章...

skinner 2019-08-23 14:22 評論0 收藏0
js運行機制及異步編程（一）

摘要：引擎的運行原理引擎也是程序，是屬于瀏覽器的一部分，由瀏覽器廠商自行開發。為了提高運行速度，現代瀏覽器一般采用即時編譯即字節碼只在運行時編譯，用到哪一行就編譯哪一行，并且把編譯結果緩存這樣整個程序的運行速度能得到顯著提升。相信大家在面試的過程中經常遇到查看執行順序的問題，如setTimeout,promise,async await等等，各種組合，是不是感覺頭都要暈掉了，其實這些問題最...

happen 2019-08-23 14:06 評論0 收藏0
js的單線程，異步及回調函數

摘要：當主線程開始執行異步任務，實際就是執行對應的回調函數。異步任務必須指定回調函數。所以注意的是，只是將事件插入了任務隊列，必須等到當前代碼執行棧執行完，主線程才會去執行它指定的回調函數。最近本人對于js的運行機制，特別是異步，還有回調函數感覺很亂，于是參考了很多有用的博客（博客原文地址會在文末給出），整理如下： js單線程我們都知道，Javascript語言的執行環境是單線程（si...

Songlcy 2019-08-26 11:53 評論0 收藏0
淺析JavaScript異步

摘要：回調函數，一般在同步情境下是最后執行的，而在異步情境下有可能不執行，因為事件沒有被觸發或者條件不滿足。同步方式請求異步同步請求當請求開始發送時，瀏覽器事件線程通知主線程，讓線程發送數據請求，主線程收到一直以來都知道JavaScript是一門單線程語言，在筆試過程中不斷的遇到一些輸出結果的問題，考量的是對異步編程掌握情況。一般被問到異步的時候腦子里第一反應就是Ajax，setTimse...

Tangpj 2019-08-26 13:53 評論0 收藏0