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

wudengzan 發(fā)布于2019-08-02 16:07 / 2481人閱讀

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

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

1 js引擎的運(yùn)行原理

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

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

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

1.2.3 執(zhí)行上下文

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

    function test() {

        console.log(num)

    }
}

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

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

        //num變量
        num: undefined
    },

    //作用域鏈
    scopeChain:[],

    //this指向
    this: window
}

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

注：創(chuàng)建變量對(duì)象發(fā)生在預(yù)編譯階段，但尚未進(jìn)入執(zhí)行階段，該變量對(duì)象都是不能訪問(wèn)的，因?yàn)榇藭r(shí)的變量對(duì)象中的變量屬性尚未賦值，值仍為undefined，只有進(jìn)入執(zhí)行階段，變量對(duì)象中的變量屬性進(jìn)行賦值后，變量對(duì)象（Variable
Object）轉(zhuǎn)為活動(dòng)對(duì)象（Active Object）后，才能進(jìn)行訪問(wèn)，這個(gè)過(guò)程就是VO –> AO過(guò)程。
建立作用域鏈
作用域鏈由當(dāng)前執(zhí)行環(huán)境的變量對(duì)象（未進(jìn)入執(zhí)行階段前）與上層環(huán)境的一系列活動(dòng)對(duì)象組成，它保證了當(dāng)前執(zhí)行環(huán)境對(duì)符合訪問(wèn)權(quán)限的變量和函數(shù)的有序訪問(wèn)。
理清作用域鏈可以幫助我們理解js很多問(wèn)題包括閉包問(wèn)題等，下面我們結(jié)合一個(gè)簡(jiǎn)單的例子來(lái)理解作用域鏈，如下：
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)建變量對(duì)象，所以他們的活動(dòng)對(duì)象和變量對(duì)象分別是AO(global)，AO(test)和VO(innerTest)，而innerTest的作用域鏈由當(dāng)前執(zhí)行環(huán)境的變量對(duì)象（未進(jìn)入執(zhí)行階段前）與上層環(huán)境的一系列活動(dòng)對(duì)象組成，如下：
innerTestEC = {

    //變量對(duì)象
    VO: {b: undefined}, 

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

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

        return result
    }

    bar()
}

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

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

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

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

云服務(wù)器 GPU云服務(wù)器 js異步編程異步機(jī)制 JavaScript異步機(jī)制異步模塊加載機(jī)制-amd

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wudengzan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

離大廠近一點(diǎn)《阿里巴巴集團(tuán)Web安全測(cè)試規(guī)范》獨(dú)家版

閱讀 3770·2021-10-13 09:39
一個(gè)程序員的正版清單

閱讀 3813·2021-09-24 09:48
如何解決兼容問(wèn)題?Win11僅支持1個(gè)Intel 7代CPU 不支持AMD Zen 1 CPU

閱讀 1207·2021-09-01 10:30
2018.12月問(wèn)題整理雜記

閱讀 2539·2019-08-30 15:55
CSS選擇器引起的一些思考

閱讀 1788·2019-08-29 16:39
我們不背誦 API，只實(shí)現(xiàn) API

閱讀 2307·2019-08-26 13:55
【每日一包0008】arr-diff

閱讀 3063·2019-08-26 12:23
使用Object.prototype.toString判斷數(shù)據(jù)類(lèi)型

閱讀 1645·2019-08-26 11:59

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

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