JS 環(huán)境執(zhí)行棧、變量對(duì)象、執(zhí)行上下文

enrecul101 發(fā)布于2019-08-20 17:05 / 376人閱讀

摘要：檢查上下文中的參數(shù)，建立該對(duì)象下的屬性與屬性值檢查當(dāng)前上下文的函數(shù)聲明，也就是使用關(guān)鍵字聲明的函數(shù)。

    function test() {
        console.log(a);                // undefined
        console.log(foo());            // 2
        
        var a = 1;
        function foo() {
            return 2;
        };
    };
    test();

不是很準(zhǔn)確的草圖，大概了解就好。

首先JS解釋器(引擎)開始解釋代碼，構(gòu)建執(zhí)行環(huán)境棧（Execution Context Stack），并根據(jù)執(zhí)行環(huán)境的不同生成不同的執(zhí)行上下文（Execution Context）

棧底永遠(yuǎn)是全局上下文（后面說），當(dāng)遇到test()，確認(rèn)調(diào)用函數(shù)，就創(chuàng)建生成test函數(shù)自己的上下文，然后將函數(shù)執(zhí)行上下文入棧（push on）到執(zhí)行環(huán)境棧中。

testEC（test Execution Context）將會(huì)開始創(chuàng)建變量對(duì)象，我們知道，當(dāng)調(diào)用一個(gè)函數(shù)（激活），一個(gè)新的執(zhí)行上下文就會(huì)被創(chuàng)建。而一個(gè)執(zhí)行上下文的生命周期可以分為兩個(gè)階段。

創(chuàng)建階段：
在這個(gè)階段中，執(zhí)行上下文分別會(huì)創(chuàng)建變量對(duì)象、建立作用域鏈，以及確定this的指向。

代碼執(zhí)行階段：
創(chuàng)建完成后，就會(huì)開始執(zhí)行代碼，這個(gè)時(shí)候，會(huì)完成變量賦值，函數(shù)引用，以及執(zhí)行其他代碼。

所以testEC將會(huì)生成一個(gè)變量對(duì)象，與之還有作用域鏈、this(這里先不討論)，注意，這里是變量對(duì)象的創(chuàng)建階段，用VO簡示。

變量對(duì)象的創(chuàng)建，經(jīng)歷以下過程。

建立arguments對(duì)象。檢查上下文中的參數(shù)，建立該對(duì)象下的屬性與屬性值（key-value）

檢查當(dāng)前上下文的函數(shù)聲明，也就是使用function關(guān)鍵字聲明的函數(shù)。在變量對(duì)象中以函數(shù)名建立一個(gè)屬性，屬性值為指向該函數(shù)所在內(nèi)存地址的引用。如果函數(shù)名的屬性已經(jīng)存在，那么該屬性將會(huì)被新的引用所覆蓋。

檢查當(dāng)前上下文中的變量聲明，每找到一個(gè)變量聲明，就在變量對(duì)象中以變量名建立一個(gè)屬性，屬性值為undefined。如果該變量名的屬性已經(jīng)存在，為了防止同名的函數(shù)被修改為undefined，則會(huì)直接跳過，原屬性值不會(huì)被修改。

所以，于是就有了圖中的VO引用的對(duì)象的圖示，這就是變量提升的真正原因，對(duì)于函數(shù)聲明，它的優(yōu)先級(jí)是大于變量聲明的，所以在創(chuàng)建階段，函數(shù)聲明的函數(shù)名就持有了函數(shù)的引用。而變量賦值需要在后面的執(zhí)行階段才被賦值。

未進(jìn)入執(zhí)行階段前，變量對(duì)象中的屬性都不能被訪問！但是進(jìn)入執(zhí)行階段之后，變量對(duì)象轉(zhuǎn)變?yōu)榱嘶顒?dòng)對(duì)象（Active Object），里面的屬性都能被訪問了，然后開始進(jìn)行執(zhí)行階段的操作。

進(jìn)入執(zhí)行階段，這時(shí)可稱之為活動(dòng)對(duì)象了（Active Object）,將進(jìn)行賦值操作。于是這時(shí)的變量就能被自由訪問了。

關(guān)于arguments對(duì)象，是個(gè)類數(shù)組結(jié)構(gòu)

目前我的測試：

函數(shù)內(nèi)設(shè)有形參，但是不傳實(shí)參，遍歷arguments對(duì)象時(shí)沒有任何值

函數(shù)內(nèi)不設(shè)形參，但是傳實(shí)參，遍歷arguments對(duì)象有值對(duì)應(yīng)的索引

    function test(a,b,c,d) {
        for (var i in arguments) {
            console.log(i);
        }
        console.log(arguments.length+"個(gè)");
    };
    test(1,2,3,4);
    // 0 1 2 3
    // "4個(gè)"
    function test2(a,b,c,d) {
        for (var i in arguments) {
            document.write(i+"
")
        }
        document.write(arguments.length+"個(gè)");
    };
    test2();
    // 什么也沒有
    // 0個(gè)

腦子里有這副圖后，我們?cè)趤砜戳硪粋€(gè)栗子：

      function test() {
        console.log(foo());
        console.log(bar);
        
        var foo = "Hello";
        console.log(foo);
        var bar = function () {
            return "world";
        };
        function foo() {
            return "hello";
        };
    };
    test();
    // "hello"
    // "undefined"
    // "Hello"

主要討論同變量聲明與同變量聲明與函數(shù)聲明的情況，這也是變量對(duì)象在創(chuàng)建時(shí)所做的工作；

檢查當(dāng)前上下文的函數(shù)聲明，也就是使用function關(guān)鍵字聲明的函數(shù)。在變量對(duì)象中以函數(shù)名建立一個(gè)屬性，屬性值為指向該函數(shù)所在內(nèi)存地址的引用。如果函數(shù)名的屬性已經(jīng)存在，那么該屬性將會(huì)被新的引用所覆蓋。
檢查當(dāng)前上下文中的變量聲明，每找到一個(gè)變量聲明，就在變量對(duì)象中以變量名建立一個(gè)屬性，屬性值為undefined。如果該變量名的屬性已經(jīng)存在，為了防止同名的函數(shù)被修改為undefined，則會(huì)直接跳過，原屬性值不會(huì)被修改。

如代碼中的foo，在test函數(shù)的執(zhí)行上下文創(chuàng)建變量對(duì)象后，創(chuàng)建階段，foo就是變量對(duì)象中的的鍵名（Key）,而鍵值就是函數(shù)的地址指針，因?yàn)楹瘮?shù)聲明的優(yōu)先級(jí)大于變量聲明，所以foo此時(shí)就持有了函數(shù)的引用，而var foo的變量聲明就被跳過。

執(zhí)行階段，進(jìn)行賦值操作，foo被重新賦值"Hello"，同時(shí)變量bar從未賦值（undefined）到持有一個(gè)函數(shù)的引用，這就是變量對(duì)象=>活動(dòng)對(duì)象，執(zhí)行棧，執(zhí)行上下文所發(fā)生的操作。

關(guān)于全局上下文

    var globla = 10;
    function test() {
        return globla++;
    };
    test();

// 以瀏覽器中為例，全局對(duì)象為window
// 全局上下文
windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

以瀏覽器中為例，全局對(duì)象為window。
全局上下文有一個(gè)特殊的地方，它的變量對(duì)象，就是window對(duì)象。而這個(gè)特殊，在this指向上也同樣適用，this也是指向window。
除此之外，全局上下文的生命周期，與程序的生命周期一致，只要程序運(yùn)行不結(jié)束，比如關(guān)掉瀏覽器窗口，全局上下文就會(huì)一直存在。其他所有的上下文環(huán)境，都能直接訪問全局上下文的屬性。