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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 描述執(zhí)行棧

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

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

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

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

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

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

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

var ECStack = [];

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

// 偽代碼// 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è)級(jí) 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);//會(huì)依次輸出 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í)行上下文”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)