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

happen 發(fā)布于2019-08-23 14:06 / 1813人閱讀

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

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

1 js引擎的運行原理

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

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

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

1.2.3 執(zhí)行上下文

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

    function test() {

        console.log(num)

    }
}

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

        //test函數(shù)
        test: , 

        //num變量
        num: undefined
    },

    //作用域鏈
    scopeChain:[],

    //this指向
    this: window
}

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

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

function test() {
    var a = 10;

    function innerTest() {
        var b = 20;

        return a + b
    }

    innerTest()
}

test()
在上面的例子中，當執(zhí)行到調(diào)用innerTest函數(shù)，進入innerTest函數(shù)環(huán)境。全局執(zhí)行上下文和test函數(shù)執(zhí)行上下文已進入執(zhí)行階段，innerTest函數(shù)執(zhí)行上下文在預編譯階段創(chuàng)建變量對象，所以他們的活動對象和變量對象分別是AO(global)，AO(test)和VO(innerTest)，而innerTest的作用域鏈由當前執(zhí)行環(huán)境的變量對象（未進入執(zhí)行階段前）與上層環(huán)境的一系列活動對象組成，如下：
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，那么按瀏覽器的標準是如何定義閉包的，我總結(jié)為三點：

在函數(shù)內(nèi)部定義新函數(shù)
新函數(shù)訪問外層函數(shù)的局部變量，即訪問外層函數(shù)環(huán)境的活動對象屬性
新函數(shù)執(zhí)行，創(chuàng)建新的函數(shù)執(zhí)行上下文，外層函數(shù)即為閉包

確定this指向
在全局環(huán)境下，全局執(zhí)行上下文中變量對象的this屬性指向為window；函數(shù)環(huán)境下的this指向卻較為靈活，需根據(jù)執(zhí)行環(huán)境和執(zhí)行方法確定

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100101.html

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

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

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

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

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

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

wudengzan 2019-08-02 16:07 評論0 收藏0
js的單線程，異步及回調(diào)函數(shù)

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

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

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

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