亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js運(yùn)行機(jī)制及異步編程（一）

happen / 1853人閱讀

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

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

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

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



首先，進(jìn)入全局環(huán)境，就會(huì)先進(jìn)行預(yù)處理，然創(chuàng)建全局上下文執(zhí)行環(huán)境（Global  ExecutionContext），會(huì)對var聲明的變量和函數(shù)聲明進(jìn)行預(yù)處理，window對象就是全局執(zhí)行上下文的變量對象，所有的變量和函數(shù)都是window對象的屬性方法。所以函數(shù)聲明提前和變量聲明提升是在創(chuàng)建變量對象中進(jìn)行的，且函數(shù)聲明優(yōu)先級高于變量聲明。然后推入stack棧中。預(yù)處完成之后，開始執(zhí)行js


當(dāng)執(zhí)行bar()時(shí)，就會(huì)進(jìn)入bar函數(shù)運(yùn)行環(huán)境，就會(huì)先進(jìn)行預(yù)處理，創(chuàng)建bar函數(shù)執(zhí)行上下文（bar Execution Context），推入stack棧中，預(yù)處理完后，開始執(zhí)行foo()


在bar函數(shù)內(nèi)部調(diào)用foo函數(shù)，則再進(jìn)入foo函數(shù)運(yùn)行環(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則在瀏覽器或者該標(biāo)簽頁關(guān)閉時(shí)出棧。


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í)行上下文，這里為了方便大家理解，暫時(shí)不講解作用域鏈以及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ā)生在預(yù)編譯階段，但尚未進(jìn)入執(zhí)行階段，該變量對象都是不能訪問的，因?yàn)榇藭r(shí)的變量對象中的變量屬性尚未賦值，值仍為undefined，只有進(jìn)入執(zhí)行階段，變量對象中的變量屬性進(jìn)行賦值后，變量對象（Variable
Object）轉(zhuǎn)為活動(dòng)對象（Active Object）后，才能進(jìn)行訪問，這個(gè)過程就是VO –> AO過程。


建立作用域鏈
作用域鏈由當(dāng)前執(zhí)行環(huán)境的變量對象（未進(jìn)入執(zhí)行階段前）與上層環(huán)境的一系列活動(dòng)對象組成，它保證了當(dāng)前執(zhí)行環(huán)境對符合訪問權(quán)限的變量和函數(shù)的有序訪問。


理清作用域鏈可以幫助我們理解js很多問題包括閉包問題等，下面我們結(jié)合一個(gè)簡單的例子來理解作用域鏈，如下：


var num = 30;

function test() {
    var a = 10;

    function innerTest() {
        var b = 20;

        return a + b
    }

    innerTest()
}

test()


在上面的例子中，當(dāng)執(zhí)行到調(diào)用innerTest函數(shù)，進(jìn)入innerTest函數(shù)環(huán)境。全局執(zhí)行上下文和test函數(shù)執(zhí)行上下文已進(jìn)入執(zhí)行階段，innerTest函數(shù)執(zhí)行上下文在預(yù)編譯階段創(chuàng)建變量對象，所以他們的活動(dòng)對象和變量對象分別是AO(global)，AO(test)和VO(innerTest)，而innerTest的作用域鏈由當(dāng)前執(zhí)行環(huán)境的變量對象（未進(jìn)入執(zhí)行階段前）與上層環(huán)境的一系列活動(dòng)對象組成，如下：


innerTestEC = {

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

    //作用域鏈
    scopeChain: [VO(innerTest), AO(test), AO(global)],  
    
    //this指向
    this: window
}


在這里我們順便思考一下，什么是閉包？
我們先看下面一個(gè)簡單例子，如下：


function foo() {
    var num = 20;

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

        return result
    }

    bar()
}

foo()


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




如上圖所示，chrome瀏覽器理解閉包是foo，那么按瀏覽器的標(biāo)準(zhǔn)是如何定義閉包的，我總結(jié)為三點(diǎn)：



在函數(shù)內(nèi)部定義新函數(shù)


新函數(shù)訪問外層函數(shù)的局部變量，即訪問外層函數(shù)環(huán)境的活動(dòng)對象屬性


新函數(shù)執(zhí)行，創(chuàng)建新的函數(shù)執(zhí)行上下文，外層函數(shù)即為閉包



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

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

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

相關(guān)文章

  • js運(yùn)行機(jī)制及異步編程（二）

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

    nifhlheimr 評論0 收藏0

  • js運(yùn)行機(jī)制及異步編程（二）

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

    skinner 評論0 收藏0

  • js運(yùn)行機(jī)制及異步編程（一）

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

    wudengzan 評論0 收藏0

  • js的單線程，異步及回調(diào)函數(shù)

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

    Songlcy 評論0 收藏0

  • 淺析JavaScript異步

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

    Tangpj 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<