[[402420]]

變量對象是一個與執行上下文相關的特殊對象，存儲著上下文中聲明的內容。按照執行上下文可劃分為全局上下文中的變量對象和函數上下文中的對象。

全局上下文中變量對象

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

函數上下文中的變量對象

在函數執行上下文中的存在著與該執行上下文相關的內容：形參、函數聲明、變量，這就是函數中的變量對象。(下文將重點介紹函數中的變量對象)

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

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 創建階段

在變量對象的創建過程中，分別完成以下幾個步驟：

創建arguments對象

arguments 是一個對應于傳遞給函數的參數的類數組對象。在變量對象創建階段，首先檢查當前上下文中的參數，建立該對象下的屬性與屬性值。arguments的創建后的結果如下所示：

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

檢查function函數聲明創建屬性

在變量對象中以函數名建立一個屬性，屬性值為指向該函數所在內存地址的引用。如果函數名的屬性已經存在，那么該屬性將會被新的引用所覆蓋。

檢查變量聲明創建屬性

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

11.2 執行階段

未進入執行階段之前，變量對象中的屬性都不能訪問,但是進入執行階段之后，變量對象(VO)轉變為了活動對象(AO)，里面的屬性都能被訪問了，然后開始進行執行階段的操作。(變量對象和活動對象其實都是同一個對象，只是處于執行上下文的不同生命周期)

首先看一下整個代碼的執行結果

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接收到了傳入的參數，完成了對應屬性值的賦值過程，并驗證了arguments參數的結構;
2. childFun函數在兩個位置均可以調用輸出正確的執行結果，證明在創建階段函數得到了提升并完成了對應的賦值;
3. val1變量在初始化之前可以進行調用，則證明在其創建階段完成了變量提升，但是其值只被賦值為undefined，當執行到對應語句才正確賦值。

本文轉載自微信公眾號「執鳶者」，可以通過以下二維碼關注。轉載本文請聯系執鳶者公眾號。