Javascript中的執行上下文如何創建

這篇文章主要介紹“Javascript中的執行上下文如何創建”，在日常操作中，相信很多人在Javascript中的執行上下文如何創建問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Javascript中的執行上下文如何創建”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

思考題

這里為了稍微將案例復雜化一點，做了一點點修改，但是并沒有改變原題所考察的點。

function func(value){
    getValue = function(){
        console.log(value);
    };
    return this
}
            
function getValue(){
    console.log(5);
}

Func(1).getValue(); //為什么是1呢？

具體執行分析

執行全局代碼，創建全局執行上下文，全局上下文被壓入執行上下文棧

ECStack = [ globalContext ];

初始化全局上下文

globalContext = {
    VO: {
        func: reference to function func(){},
        getValue: reference to function getValue(){}
    },
    Scope: [globalContext.VO],
    this: globalContext.VO //全局上下文
}

初始化全局上下文同時創建了兩個函數，因此也會保存他們父級作用域鏈在他們的內部屬性 [[scope]] 內

func.[[scope]] = [
     globalContext.VO
];
getValue.[[scope]] = [
     globalContext.VO
];

此時開始執行代碼，執行到最后的語句時先執行 func 函數，也就創建按步驟 func 函數執行上下文：

• 復制函數 [[scope]] 屬性創建作用域鏈

• 用 arguments 創建活動對象

• 初始化活動對象

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

• 創建this，簡單分析：MemberExpression 值為func，func是一個函數對象，理所當然是一個Reference ，其中它的 base value 是 EnvironmentRecord ，所以它的 this 值為 ImplicitThisValue(ref)，返回值始終是 undefined ，非嚴格模式下，其值會被隱式轉換為全局對象。

funcContext = {
    AO: {
        arguments: { // 數組
            0: 1,
            length: 1
        }
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}

可能有人會有疑問，func 里的 getValue 呢？，因為它并沒有變量申明，因此他其實是一個屬性的賦值操作，在后面運行時才會被執行。

創建函數執行上下文后壓入執行上下文棧

    ECStack = [
        funcContext,
        globalContext
    ];

函數開始執行，此時就是為什么最后輸出是1的關鍵了，第一句賦值操作，那么就需要沿著執行上下文去找變量 getValue，那么我們就來看 funcContext 中的作用域，首先找到 funcContext.AO 顯然并不存在 getValue 這一屬性，那么沿著作用域鏈往上找，找到了globalContext.VO ，找到了 getValue ，這時候就會給全局作用域下的 getValue 屬性重新賦值，賦的是一個函數的傳新版本，也就重新創建了函數作用域，將這個全新的 getValue 函數的父級作用域鏈保存在它在他們的內部屬性 [[scope]] 內：

getValue .[[scope]] = [ funcContext.AO, globalContext.VO ];

然后才繼續返回 this ，查找 funcContext 的 this ，即返回undefined；func 執行上下文出棧

ECStack = [ globalContext ];

繼續執行Func(1).getValue()，前半部分返回了 undefined ，此時系統隱式轉換為全局變量對象，從全局變量對象中找到 getValue 屬性。這時候我們發現 getValue 早已不是當年那個少年，執行全新的 getValue 的函數執行上下文并入棧：

getValueContext = {
    AO: {
        arguments: { // 數組
            length: 0
        }
    },
    Scope: [ AO, funcContext.AO, globalContext.VO ],
    this: undefined
} ECStack = [
    getValueContext,
    globalContext
 ];

函數開始執行，發現她要輸出 value ,沿著作用域去找，getValueContext.AO 中并沒有這個屬性， 繼續往下找找到 funcContext.AO（注意！ ），在形參中 找到了 value 那么就輸出對樣的值，也就輸出了1。函數執行完畢，getValueContext 和 globalContext 相繼出棧并銷毀，代碼運行完畢。

到此，關于“Javascript中的執行上下文如何創建”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！