變量對象和執(zhí)行環(huán)境的理解

everfly 發(fā)布于2019-08-20 16:12 / 1948人閱讀

摘要：正文執(zhí)行環(huán)境的理解執(zhí)行環(huán)境或者執(zhí)行上下文后面簡稱定義了變量或者函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了他們各自的行為。最后全局環(huán)境的變量對象總結(jié)活動(dòng)對象和變量對象是執(zhí)行環(huán)境在不同生命期的不同叫法。未進(jìn)入執(zhí)行階段之前，變量對象中的屬性都不能訪問。

背景

夯實(shí)基礎(chǔ)才是進(jìn)步的根源，基礎(chǔ)不牢地動(dòng)山搖??！于是乎，結(jié)合《javascript高級程序設(shè)計(jì)》來點(diǎn)基礎(chǔ)的學(xué)習(xí)和理解。本文主要會(huì)有兩部分。rt??！

正文

1、執(zhí)行環(huán)境的理解

執(zhí)行環(huán)境（或者執(zhí)行上下文）（execution context 后面簡稱ec）定義了變量或者函數(shù)有權(quán)訪問的其他數(shù)據(jù)，決定了他們各自的行為。如果不好理解的話，接著看后面。

全局執(zhí)行環(huán)境是最外圍的一個(gè)執(zhí)行環(huán)境，在web瀏覽器中，全局執(zhí)行環(huán)境被默認(rèn)為是指window對象。因此所有的全局變量和函數(shù)都是作為window對象的屬性和方法創(chuàng)建的。全局執(zhí)行環(huán)境直到應(yīng)用程序推出才會(huì)被銷毀（例如關(guān)閉網(wǎng)頁或者瀏覽器的時(shí)候）。

每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境。當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)的時(shí)候，函數(shù)的環(huán)境就會(huì)被推入一個(gè)環(huán)境棧中，而在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出。把控制權(quán)返回給之前的執(zhí)行環(huán)境了。

執(zhí)行環(huán)境一般分為全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境。

這個(gè)時(shí)候應(yīng)該上代碼了(高程上的代碼)

var color = "blue";

function changeColor() {
    var anotherColor = "red";

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

來看看流程吧：

全局環(huán)境入棧

全局環(huán)境入棧之后，其中的可執(zhí)行代碼開始執(zhí)行，直到遇到了changeColor()，這一句激活函數(shù)changeColor創(chuàng)建它自己的執(zhí)行上下文，因此第二步就是changeColor的執(zhí)行上下文入棧。

changeColor的環(huán)境入棧之后，js執(zhí)行引擎開始執(zhí)行其中的可執(zhí)行代碼，遇到swapColors()之后又激活了一個(gè)執(zhí)行上下文。因此第三步是swapColors的執(zhí)行上下文入棧。

在swapColors的可執(zhí)行代碼中，再?zèng)]有遇到其他能生成執(zhí)行環(huán)境的情況，所以在swapColors順利執(zhí)行完畢后，swapColors的環(huán)境從棧中彈出

swapColors環(huán)境彈出后繼續(xù)changeColor的執(zhí)行，發(fā)現(xiàn)沒有可以執(zhí)行的了。然后就彈出。

最后只剩下全局環(huán)境了。這個(gè)是要只有關(guān)閉當(dāng)前網(wǎng)頁或者瀏覽器就能銷毀該環(huán)境。

總結(jié)

所有變量都存在于一個(gè)執(zhí)行環(huán)境中。

全局環(huán)境只能訪問全局環(huán)境中的變量和函數(shù)，不能訪問局部環(huán)境中的任何數(shù)據(jù)。

執(zhí)行環(huán)境有全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境之分。

js單線程，是同步執(zhí)行的，只有棧頂?shù)沫h(huán)境處于執(zhí)行中，其他環(huán)境需要等待。

2、變量對象的理解

上面我們講到了執(zhí)行環(huán)境，環(huán)境中的變量和函數(shù)都是保存在什么地方的呢？

好了，不賣關(guān)子了。每個(gè)執(zhí)行環(huán)境都有一個(gè)與該環(huán)境相關(guān)聯(lián)的變量對象（variable object）。環(huán)境中定義的所有變量和函數(shù)都是保存在這個(gè)對象中的。雖然我們編寫的代碼沒有辦法直接訪問這個(gè)對象，但是js解析器在處理數(shù)據(jù)的時(shí)候會(huì)使用它。

執(zhí)行環(huán)境的生命周期：

變量對象的創(chuàng)建

上面就是變量對象的一個(gè)創(chuàng)建過程，這個(gè)過程的解釋：

建立arguments對象。檢查當(dāng)前上下文中的參數(shù)，建立該對象下的屬性與屬性值。

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

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

上面的代碼解釋：

function test(c, d) {
    console.log(d);
    console.log(a);
    console.log(bar());
    console.log(c);
    
    var a = 1;
    function bar() {
        return 2;
    }
}

test(3,4);


//創(chuàng)建過程  EC = execution context
testEC = {
    // 變量對象
    VO: {},
    // 作用于鏈
    scopeChain: {},
    // 確定this指向
    this: {}
}

// VO = Variable Object，即變量對象
VO = {
    arguments: {
        c: undefined,
        d: undefined
    },  //注：在瀏覽器的展示中，函數(shù)的參數(shù)可能并不是放在arguments對象中，這里為了方便理解，我做了這樣的處理
    bar:   // 表示foo的地址引用
    a: undefined
}

// 執(zhí)行階段
VO ->  AO   // Active Object
AO = {
    arguments: {
        c: 3,
        d: 4
    },
    bar: ,
    a: 1
}


// 實(shí)際執(zhí)行
function test(c, d) {
    // arguments = { c : 3, d : 4 }; // 這樣理解方便點(diǎn)，理解arguments對象
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test(3, 4);

就是在執(zhí)行環(huán)境在創(chuàng)建階段的時(shí)候所有的變量是不能被訪問的，只有在執(zhí)行階段的時(shí)候才能被訪問，因?yàn)榇藭r(shí)的變量對象被轉(zhuǎn)換成了活動(dòng)對象。

// 執(zhí)行階段
VO ->  AO   // Active Object
AO = {
    arguments: {...},
    foo: ,
    a: 1
}

說到底變量對象和活動(dòng)對象本質(zhì)上是一樣的，只是處于執(zhí)行環(huán)境的不同生命期。

最后全局環(huán)境的變量對象

windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

總結(jié)：

活動(dòng)對象和變量對象是執(zhí)行環(huán)境在不同生命期的不同叫法。

function聲明會(huì)比var聲明優(yōu)先級更高一點(diǎn)。

未進(jìn)入執(zhí)行階段之前，變量對象中的屬性都不能訪問。

感謝

《javascript高級程序設(shè)計(jì)》
知乎上面的答案
波同學(xué)變量對象詳解

云服務(wù)器 GPU云服務(wù)器環(huán)境變量的配置云計(jì)算和大數(shù)據(jù)的理解控制php的環(huán)境變量服務(wù)器需要的環(huán)境變量

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82789.html

發(fā)表評論

登陸后可評論

0條評論

everfly

男|高級講師

我要關(guān)注我要私信

TA的文章

日本什么主機(jī)好-買什么游戲主機(jī)好？

閱讀 1566·2021-09-22 15:52
iis主機(jī)a是什么-主機(jī)頭是什么？

閱讀 3472·2021-09-22 14:59
Django下使用celery 異步發(fā)送短信驗(yàn)證碼

閱讀 2852·2021-09-02 15:12
Virtono夏季促銷：1核/1G內(nèi)存/25G [email protected] 可選美國/德國/

閱讀 980·2021-08-20 09:35
聽說你還不理解JavaScript閉包

閱讀 1585·2019-08-30 14:09
記一個(gè)ios滾動(dòng)穿透問題

閱讀 2717·2019-08-30 13:56
Vue keepAlive 數(shù)據(jù)緩存工具，實(shí)現(xiàn)返回上一個(gè)頁面瀏覽的位置；

閱讀 1656·2019-08-26 18:27
pm2 命令使用

閱讀 3370·2019-08-26 13:37

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

變量對象和執(zhí)行環(huán)境的理解

相關(guān)文章

**還是不明白JavaScript - 執(zhí)行環(huán)境、作用域、作用域鏈、閉包嗎？**

**javascript引擎執(zhí)行的過程的理解--語法分析和預(yù)編譯階段**

**javascript系列--javascript引擎執(zhí)行的過程的理解--語法分析和預(yù)編譯階段**

形象化模擬作用域鏈，深入理解js作用域、閉包

**javascript中執(zhí)行環(huán)境及作用域的理解**

發(fā)表評論

0條評論

everfly

男|高級講師

TA的文章

日本什么主機(jī)好-買什么游戲主機(jī)好？

iis主機(jī)a是什么-主機(jī)頭是什么？

Django下使用celery 異步發(fā)送短信驗(yàn)證碼

Virtono夏季促銷：1核/1G內(nèi)存/25G [email protected] 可選美國/德國/

聽說你還不理解JavaScript閉包

記一個(gè)ios滾動(dòng)穿透問題

Vue keepAlive 數(shù)據(jù)緩存工具，實(shí)現(xiàn)返回上一個(gè)頁面瀏覽的位置；

pm2 命令使用

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

變量對象和執(zhí)行環(huán)境的理解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！