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

保定ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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

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

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

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

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

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

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

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

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

2. 函數(shù)執(zhí)行上下文：存在無數(shù)個，只有在函數(shù)被調(diào)用的時候才會被創(chuàng)建，每次調(diào)用函數(shù)都會創(chuàng)建一個新的執(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代碼時，會創(chuàng)建一個全局執(zhí)行上下文并Push到當(dāng)前的執(zhí)行上下文棧中。每當(dāng)發(fā)生函數(shù)調(diào)用，引擎都會為該函數(shù)創(chuàng)建一個新的函數(shù)執(zhí)行上下文并push到當(dāng)前執(zhí)行棧的棧頂。

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

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

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

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

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

var ECStack = [];

試想當(dāng) JavaScript 開始要解釋執(zhí)行代碼的時候，最先遇到的就是全局代碼，所以初始化的時候首先就會向執(zhí)行上下文棧壓入一個全局執(zhí)行上下文，我們用 globalContext 表示它，并且只有當(dāng)整個應(yīng)用程序結(jié)束的時候，ECStack 才會被清空，所以程序結(jié)束之前， ECStack 最底部永遠(yuǎn)有個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í)行一個函數(shù)的時候，就會創(chuàng)建一個執(zhí)行上下文，并且壓入（push）執(zhí)行上下文棧，當(dāng)函數(shù)執(zhí)行完畢的時候，就會將函數(shù)的執(zhí)行上下文從棧中彈出（pop）。知道了這樣的工作原理，讓我們來看看如何處理上面這段代碼：

// 偽代碼// fun1()ECStack.push(<fun1> functionContext);// fun1中竟然調(diào)用了fun2，還要創(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)有個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í)行上下文”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前題目：JavaScript怎么執(zhí)行上下文
網(wǎng)站鏈接：http://chinadenli.net/article30/ppcgso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、靜態(tài)網(wǎng)站、微信小程序、網(wǎng)站建設(shè)、App設(shè)計(jì)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)