JavaScript深入之執(zhí)行上下文

gougoujiang 發(fā)布于2019-08-20 15:46 / 2422人閱讀

摘要：深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的為例，具體講解當(dāng)函數(shù)執(zhí)行的時候，執(zhí)行上下文棧變量對象作用域鏈?zhǔn)侨绾巫兓?。前言在深入之?zhí)行上下文棧中講到，當(dāng)代碼執(zhí)行一段可執(zhí)行代碼時，會創(chuàng)建對應(yīng)的執(zhí)行上下文。

JavaScript深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的demo為例，具體講解當(dāng)函數(shù)執(zhí)行的時候，執(zhí)行上下文棧、變量對象、作用域鏈?zhǔn)侨绾巫兓摹?/p>

前言

在《JavaScript深入之執(zhí)行上下文?！分兄v到，當(dāng) JavaScript 代碼執(zhí)行一段可執(zhí)行代碼(executable code)時，會創(chuàng)建對應(yīng)的執(zhí)行上下文(execution context)。

對于每個執(zhí)行上下文，都有三個重要屬性：

變量對象(Variable object，VO)

作用域鏈(Scope chain)

this

然后分別在《JavaScript深入之變量對象》、《JavaScript深入之作用域鏈》、《JavaScript深入之從ECMAScript規(guī)范解讀this》中講解了這三個屬性。

閱讀本文前，如果對以上的概念不是很清楚，希望先閱讀這些文章。

因為，這一篇，我們會結(jié)合著所有內(nèi)容，講講執(zhí)行上下文的具體處理過程。

思考題

在《JavaScript深入之詞法作用域和動態(tài)作用域》中，提出這樣一道思考題：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

兩段代碼都會打印"local scope"。雖然兩段代碼執(zhí)行的結(jié)果一樣，但是兩段代碼究竟有哪些不同呢？

緊接著就在下一篇《JavaScript深入之執(zhí)行上下文?！分?，講到了兩者的區(qū)別在于執(zhí)行上下文棧的變化不一樣，然而，如果是這樣籠統(tǒng)的回答，依然顯得不夠詳細(xì)，本篇就會詳細(xì)的解析執(zhí)行上下文棧和執(zhí)行上下文的具體變化過程。

具體執(zhí)行分析

我們分析第一段代碼：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

執(zhí)行過程如下：

1.執(zhí)行全局代碼，創(chuàng)建全局執(zhí)行上下文，全局上下文被壓入執(zhí)行上下文棧

    ECStack = [
        globalContext
    ];

2.全局上下文初始化

    globalContext = {
        VO: [global, scope, checkscope],
        Scope: [globalContext.VO],
        this: globalContext.VO
    }

2.初始化的同時，checkscope 函數(shù)被創(chuàng)建，保存作用域鏈到函數(shù)的內(nèi)部屬性[[scope]]

    checkscope.[[scope]] = [
      globalContext.VO
    ];

3.執(zhí)行 checkscope 函數(shù)，創(chuàng)建 checkscope 函數(shù)執(zhí)行上下文，checkscope 函數(shù)執(zhí)行上下文被壓入執(zhí)行上下文棧

    ECStack = [
        checkscopeContext,
        globalContext
    ];

4.checkscope 函數(shù)執(zhí)行上下文初始化：

復(fù)制函數(shù) [[scope]] 屬性創(chuàng)建作用域鏈，

用 arguments 創(chuàng)建活動對象，

初始化活動對象，即加入形參、函數(shù)聲明、變量聲明，

將活動對象壓入 checkscope 作用域鏈頂端。

同時 f 函數(shù)被創(chuàng)建，保存作用域鏈到 f 函數(shù)的內(nèi)部屬性[[scope]]

    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope: undefined,
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

5.執(zhí)行 f 函數(shù)，創(chuàng)建 f 函數(shù)執(zhí)行上下文，f 函數(shù)執(zhí)行上下文被壓入執(zhí)行上下文棧

    ECStack = [
        fContext,
        checkscopeContext,
        globalContext
    ];

6.f 函數(shù)執(zhí)行上下文初始化, 以下跟第 4 步相同：

復(fù)制函數(shù) [[scope]] 屬性創(chuàng)建作用域鏈

用 arguments 創(chuàng)建活動對象

初始化活動對象，即加入形參、函數(shù)聲明、變量聲明

將活動對象壓入 f 作用域鏈頂端

    fContext = {
        AO: {
            arguments: {
                length: 0
            }
        },
        Scope: [AO, checkscopeContext.AO, globalContext.VO],
        this: undefined
    }

7.f 函數(shù)執(zhí)行，沿著作用域鏈查找 scope 值，返回 scope 值

8.f 函數(shù)執(zhí)行完畢，f 函數(shù)上下文從執(zhí)行上下文棧中彈出

    ECStack = [
        checkscopeContext,
        globalContext
    ];

9.checkscope 函數(shù)執(zhí)行完畢，checkscope 執(zhí)行上下文從執(zhí)行上下文棧中彈出

    ECStack = [
        globalContext
    ];

第二段代碼就留給大家去嘗試模擬它的執(zhí)行過程。

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

不過，在下一篇《JavaScript深入之閉包》中也會提及這段代碼的執(zhí)行過程。

下一篇文章

《JavaScript深入之閉包》

相關(guān)鏈接

《JavaScript深入之詞法作用域和動態(tài)作用域》

《JavaScript深入之執(zhí)行上下文?！?/p>

《JavaScript深入之變量對象》

《JavaScript深入之作用域鏈》

《JavaScript深入之從ECMAScript規(guī)范解讀this》

重要參考

《一道js面試題引發(fā)的思考》

本文寫的太好，給了我很多啟發(fā)。感激不盡！

深入系列

JavaScript深入系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列預(yù)計寫十五篇左右，旨在幫大家捋順JavaScript底層知識，重點講解如原型、作用域、執(zhí)行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。

如果有錯誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，請?wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎star，對作者也是一種鼓勵。

GPU云服務(wù)器云服務(wù)器執(zhí)行上下文深入理解webrtc之a(chǎn)ec 深入javascript javascript深入

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

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

發(fā)表評論

登陸后可評論

0條評論

gougoujiang

男|高級講師

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

TA的文章

mix-blend-mode及background-blend-mode實現(xiàn)炫酷的圖片樣式

閱讀 2224·2019-08-30 15:54
錘子官網(wǎng)3D翻轉(zhuǎn)特效banner插件

閱讀 1960·2019-08-30 13:49
重學(xué)前端學(xué)習(xí)筆記（二）--前端學(xué)習(xí)路線與方法

閱讀 679·2019-08-29 18:44
瀏覽器渲染機制

閱讀 834·2019-08-29 18:39
常見面試題—css實現(xiàn)垂直水平居中

閱讀 1117·2019-08-29 15:40
jquery的lt選擇器里的一些坑

閱讀 1538·2019-08-29 12:56
NPM酷庫：ip，IP地址處理

閱讀 3151·2019-08-26 11:39
JS 異步(callback→Promise→async/await)

閱讀 3104·2019-08-26 11:37

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

資訊專欄INFORMATION COLUMN

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

JavaScript深入之執(zhí)行上下文

相關(guān)文章

JavaScript深入之作用域鏈

JavaScript深入之閉包