[[402420]]

變量對(duì)象是一個(gè)與執(zhí)行上下文相關(guān)的特殊對(duì)象，存儲(chǔ)著上下文中聲明的內(nèi)容。按照?qǐng)?zhí)行上下文可劃分為全局上下文中的變量對(duì)象和函數(shù)上下文中的對(duì)象。

全局上下文中變量對(duì)象

全局對(duì)象在進(jìn)入全局執(zhí)行上下文之前就已經(jīng)完成創(chuàng)建，該對(duì)象只有一份，其屬性可在程序任何位置訪問，其生命周期將在程序退出時(shí)終止。例如定義在全局的變量、Math、Date等都屬于全局上下文中的變量對(duì)象。

函數(shù)上下文中的變量對(duì)象

在函數(shù)執(zhí)行上下文中的存在著與該執(zhí)行上下文相關(guān)的內(nèi)容：形參、函數(shù)聲明、變量，這就是函數(shù)中的變量對(duì)象。(下文將重點(diǎn)介紹函數(shù)中的變量對(duì)象)

在“百題斬——執(zhí)行上下文”中講述了執(zhí)行上下文分為創(chuàng)建階段和代碼執(zhí)行階段，其中創(chuàng)建階段中會(huì)完成變量創(chuàng)建;在代碼執(zhí)行階段會(huì)完成變量賦值。下面從這兩個(gè)階段介紹該過程。

function test(x, y, z) { 
    console.log(arguments); 
    console.log(childFun()); 
    console.log(val1); 
    var val1 = 10; 
    console.log(val1); 
    function childFun() { 
        return 'childFun'; 
    } 
    console.log(childFun()); 
} 

11.1 創(chuàng)建階段

在變量對(duì)象的創(chuàng)建過程中，分別完成以下幾個(gè)步驟：

創(chuàng)建arguments對(duì)象

arguments 是一個(gè)對(duì)應(yīng)于傳遞給函數(shù)的參數(shù)的類數(shù)組對(duì)象。在變量對(duì)象創(chuàng)建階段，首先檢查當(dāng)前上下文中的參數(shù)，建立該對(duì)象下的屬性與屬性值。arguments的創(chuàng)建后的結(jié)果如下所示：

[Arguments] { '0': x, '1': y, '2': z } 

檢查function函數(shù)聲明創(chuàng)建屬性

在變量對(duì)象中以函數(shù)名建立一個(gè)屬性，屬性值為指向該函數(shù)所在內(nèi)存地址的引用。如果函數(shù)名的屬性已經(jīng)存在，那么該屬性將會(huì)被新的引用所覆蓋。

檢查變量聲明創(chuàng)建屬性

對(duì)于var聲明的變量，每找到一個(gè)就在變量對(duì)象中以變量名建立一個(gè)屬性，屬性值為undefined。如果該變量名的屬性已經(jīng)存在，為了防止同名的函數(shù)被修改為undefined，則會(huì)直接跳過，原屬性值不會(huì)被修改。對(duì)于let和const聲明的變量只會(huì)建立一個(gè)屬性但并沒有對(duì)齊進(jìn)行賦值，所以不能進(jìn)行使用。

11.2 執(zhí)行階段

未進(jìn)入執(zhí)行階段之前，變量對(duì)象中的屬性都不能訪問,但是進(jìn)入執(zhí)行階段之后，變量對(duì)象(VO)轉(zhuǎn)變?yōu)榱嘶顒?dòng)對(duì)象(AO)，里面的屬性都能被訪問了，然后開始進(jìn)行執(zhí)行階段的操作。(變量對(duì)象和活動(dòng)對(duì)象其實(shí)都是同一個(gè)對(duì)象，只是處于執(zhí)行上下文的不同生命周期)

首先看一下整個(gè)代碼的執(zhí)行結(jié)果

function test1(x, y, z) { 
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 } 
    console.log(childFun()); // childFun 
    console.log(val1); // undefined 
    var val1 = 10; 
    console.log(val1); // 10 
    function childFun() { 
        return 'childFun'; 
    } 
    console.log(childFun()); // childFun 
} 
 
test1(1, 2, 3); 

1. 上面中的arguments接收到了傳入的參數(shù)，完成了對(duì)應(yīng)屬性值的賦值過程，并驗(yàn)證了arguments參數(shù)的結(jié)構(gòu);
2. childFun函數(shù)在兩個(gè)位置均可以調(diào)用輸出正確的執(zhí)行結(jié)果，證明在創(chuàng)建階段函數(shù)得到了提升并完成了對(duì)應(yīng)的賦值;
3. val1變量在初始化之前可以進(jìn)行調(diào)用，則證明在其創(chuàng)建階段完成了變量提升，但是其值只被賦值為undefined，當(dāng)執(zhí)行到對(duì)應(yīng)語句才正確賦值。

本文轉(zhuǎn)載自微信公眾號(hào)「執(zhí)鳶者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系執(zhí)鳶者公眾號(hào)。