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

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

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

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

前言

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

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

變量對(duì)象(Variable object，VO)

作用域鏈(Scope chain)

this

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

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

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

思考題

在《JavaScript深入之詞法作用域和動(dòng)態(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()();

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

緊接著就在下一篇《JavaScript深入之執(zhí)行上下文?！分校v到了兩者的區(qū)別在于執(zhí)行上下文棧的變化不一樣，然而，如果是這樣籠統(tǒng)的回答，依然顯得不夠詳細(xì)，本篇就會(huì)詳細(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.初始化的同時(shí)，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)建活動(dòng)對(duì)象，

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

將活動(dòng)對(duì)象壓入 checkscope 作用域鏈頂端。

同時(shí) 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)建活動(dòng)對(duì)象

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

將活動(dòng)對(duì)象壓入 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深入之閉包》中也會(huì)提及這段代碼的執(zhí)行過程。

下一篇文章

《JavaScript深入之閉包》

相關(guān)鏈接

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

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

《JavaScript深入之變量對(duì)象》

《JavaScript深入之作用域鏈》

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

重要參考

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

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

深入系列

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

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

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

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

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

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

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

登陸后可評(píng)論

0條評(píng)論

gougoujiang

男|高級(jí)講師

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

TA的文章

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

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

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

閱讀 728·2019-08-29 18:44
瀏覽器渲染機(jī)制

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

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

閱讀 1589·2019-08-29 12:56
NPM酷庫(kù)：ip，IP地址處理

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

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

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

JavaScript深入之作用域鏈

JavaScript深入之閉包