JavaScript怎么執(zhí)行上下文

這篇文章主要介紹了JavaScript怎么執(zhí)行上下文，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、怎么描述執(zhí)行上下文

1.1 本節(jié)知識導(dǎo)圖：

1.2 如果描述執(zhí)行上下文

1. 當(dāng)函數(shù)執(zhí)行時(shí)，會創(chuàng)建一個(gè)稱為執(zhí)行上下文的內(nèi)部對象。一個(gè)執(zhí)行上下文定義了一個(gè)函數(shù)執(zhí)行時(shí)的環(huán)境；

2. 當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，會創(chuàng)建一個(gè)活動(dòng)記錄（有時(shí)候也稱為執(zhí)行上下文）。這個(gè)記錄會包含函數(shù)在哪里被調(diào)用（調(diào)用棧）、函數(shù)的調(diào)用方式、傳入的參數(shù)等信息 ；

3. 每個(gè)函數(shù)在被定義時(shí)，就會有一個(gè)[[scope]]屬性，這個(gè)屬性里保存著作用域鏈，而執(zhí)行的前一刻都會創(chuàng)建一個(gè)OA對象，這個(gè)對象就是執(zhí)行上下文，這個(gè)OA對象會被插入[[scope]]中作用域鏈的最頂端，這個(gè)對象里保存著函數(shù)體聲明的所有變量、參數(shù)和方法。一個(gè)OA對象的有序列表。

上述三條描述都符合執(zhí)行上下文的一些特點(diǎn)，但側(cè)重點(diǎn)都不一樣。

1.3 執(zhí)行上下文的類型

1. 全局執(zhí)行上下文：只有一個(gè)，瀏覽器中的全局對象就是 window 對象，this 指向這個(gè)全局對象。

2. 函數(shù)執(zhí)行上下文：存在無數(shù)個(gè)，只有在函數(shù)被調(diào)用的時(shí)候才會被創(chuàng)建，每次調(diào)用函數(shù)都會創(chuàng)建一個(gè)新的執(zhí)行上下文。

3. Eval 函數(shù)執(zhí)行上下文： 指的是運(yùn)行在 eval 函數(shù)中的代碼，很少用而且不建議使用。

二、執(zhí)行棧（Execution context stack）

大家都明白，函數(shù)的執(zhí)行順序和它的定義順序沒關(guān)系，但如何解釋，就需要從執(zhí)行棧說起了。

2.1 本節(jié)知識導(dǎo)圖

2.2 描述執(zhí)行棧

執(zhí)行棧，也叫調(diào)用棧，具有 LIFO（后進(jìn)先出）結(jié)構(gòu)，用于存儲在代碼執(zhí)行期間創(chuàng)建的所有執(zhí)行上下文。

首次運(yùn)行JS代碼時(shí)，會創(chuàng)建一個(gè)全局執(zhí)行上下文并Push到當(dāng)前的執(zhí)行上下文棧中。每當(dāng)發(fā)生函數(shù)調(diào)用，引擎都會為該函數(shù)創(chuàng)建一個(gè)新的函數(shù)執(zhí)行上下文并push到當(dāng)前執(zhí)行棧的棧頂。

當(dāng)棧頂函數(shù)運(yùn)行完成后，其對應(yīng)的函數(shù)執(zhí)行上下文將會從執(zhí)行棧中pop出，上下文控制權(quán)將移到當(dāng)前執(zhí)行棧的下一個(gè)執(zhí)行上下文。

接下來問題來了，我們寫的函數(shù)多了去了，如何管理創(chuàng)建的那么多執(zhí)行上下文呢？

三、形象化執(zhí)行棧

我們利用圖片+文字描述的方式來解釋這樣幾段代碼：

3.1 為了模擬執(zhí)行上下文棧的行為，讓我們定義執(zhí)行上下文棧為一個(gè)數(shù)組：

var ECStack = [];

試想當(dāng) JavaScript 開始要解釋執(zhí)行代碼的時(shí)候，最先遇到的就是全局代碼，所以初始化的時(shí)候首先就會向執(zhí)行上下文棧壓入一個(gè)全局執(zhí)行上下文，我們用 globalContext 表示它，并且只有當(dāng)整個(gè)應(yīng)用程序結(jié)束的時(shí)候，ECStack 才會被清空，所以程序結(jié)束之前， ECStack 最底部永遠(yuǎn)有個(gè)globalContext：

ECStack.push('globalContext');ECStack // ["globalContext"]

現(xiàn)在 JavaScript 遇到下面的這段代碼了：

function fun1() {
    fun2();}function fun2() {
    fun3();}function fun3() {
    console.log('最后打印3')}fun1(); // 最后打印3

當(dāng)執(zhí)行一個(gè)函數(shù)的時(shí)候，就會創(chuàng)建一個(gè)執(zhí)行上下文，并且壓入（push）執(zhí)行上下文棧，當(dāng)函數(shù)執(zhí)行完畢的時(shí)候，就會將函數(shù)的執(zhí)行上下文從棧中彈出（pop）。知道了這樣的工作原理，讓我們來看看如何處理上面這段代碼：

// 偽代碼// fun1()ECStack.push(<fun1> functionContext);// fun1中竟然調(diào)用了fun2，還要?jiǎng)?chuàng)建fun2的執(zhí)行上下文ECStack.push(<fun2> functionContext);// 擦，fun2還調(diào)用了fun3！ECStack.push(<fun3> functionContext);// fun3執(zhí)行完畢ECStack.pop();// fun2執(zhí)行完畢ECStack.pop();// fun1執(zhí)行完畢ECStack.pop();// javascript接著執(zhí)行下面的代碼，但是ECStack底層永遠(yuǎn)有個(gè)globalContext

注意：除了流程圖，在此送大家2020最新企業(yè)級 Vue3.0/Js/ES6/TS/React/Node等實(shí)戰(zhàn)視頻教程，點(diǎn)擊此處免費(fèi)獲取，小白勿進(jìn)哦

再看如下代碼：

console.log(1);function father() {
    console.log(2);
    (function child() {
        console.log(3);
    }());
    console.log(4);}father();console.log(5);//會依次輸出 1 2 3 4 5

分析它的執(zhí)行棧經(jīng)歷了什么：

其實(shí)到這里我們已經(jīng)大致了解了執(zhí)行棧在函數(shù)執(zhí)行前->執(zhí)行后的流程了。

四、思考題

現(xiàn)在我們已經(jīng)了解了執(zhí)行上下文棧是如何處理執(zhí)行上下文的，所以讓我們看看上篇文章《從作用域到作用域鏈》最后的問題：

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()();

兩段代碼執(zhí)行的結(jié)果一樣，但是兩段代碼究竟有哪些不同呢？

答案就是執(zhí)行上下文棧的變化不一樣。

讓我們模擬第一段代碼：

ECStack.push(<checkscope> functionContext);ECStack.push(<f> functionContext);ECStack.pop();ECStack.pop();

讓我們模擬第二段代碼：

ECStack.push(<checkscope> functionContext);ECStack.pop();ECStack.push(<f> functionContext);ECStack.pop();

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript怎么執(zhí)行上下文”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!