JavaScript深刻之變量對象

JavaScript深刻系列第四篇，具體講解執行上下文中的變量對象與活動對象。全局上下文下的變量對象是什麼？函數上下文下的活動對象是如何分析和執行的？還有兩個思考題幫你加深印象，快來看看吧！

前言

在上篇《JavaScript深刻之執行上下文棧》中講到，當 JavaScript 代碼執行一段可執行代碼(executable code)時，會建立對應的執行上下文(execution context)。

對於每一個執行上下文，都有三個重要屬性：

• 變量對象(Variable object，VO)
• 做用域鏈(Scope chain)
• this

今天重點講講建立變量對象的過程。

變量對象

變量對象是與執行上下文相關的數據做用域，存儲了在上下文中定義的變量和函數聲明。

由於不一樣執行上下文下的變量對象稍有不一樣，因此咱們來聊聊全局上下文下的變量對象和函數上下文下的變量對象。

全局上下文

咱們先了解一個概念，叫全局對象。在 W3C school 中也有介紹：

全局對象是預約義的對象，做爲 JavaScript 的全局函數和全局屬性的佔位符。經過使用全局對象，能夠訪問全部其餘全部預約義的對象、函數和屬性。

在頂層 JavaScript 代碼中，能夠用關鍵字 this 引用全局對象。由於全局對象是做用域鏈的頭，這意味着全部非限定性的變量和函數名都會做爲該對象的屬性來查詢。

例如，當JavaScript 代碼引用 parseInt() 函數時，它引用的是全局對象的 parseInt 屬性。全局對象是做用域鏈的頭，還意味着在頂層 JavaScript 代碼中聲明的全部變量都將成爲全局對象的屬性。

若是看的不是很懂的話，容我再來介紹下全局對象:

1.能夠經過 this 引用，在客戶端 JavaScript 中，全局對象就是 Window 對象。

console.log(this);複製代碼

2.全局對象是由 Object 構造函數實例化的一個對象。

console.log(this instanceof Object);複製代碼

3.預約義了一堆，嗯，一大堆函數和屬性。

// 都能生效
console.log(Math.random());
console.log(this.Math.random());複製代碼

4.做爲全局變量的宿主。

var a = 1;
console.log(this.a);複製代碼

5.客戶端 JavaScript 中，全局對象有 window 屬性指向自身。

var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);複製代碼

花了一個大篇幅介紹全局對象，其實就想說：

全局上下文中的變量對象就是全局對象吶！

函數上下文

在函數上下文中，咱們用活動對象(activation object, AO)來表示變量對象。

活動對象和變量對象實際上是一個東西，只是變量對象是規範上的或者說是引擎實現上的，不可在 JavaScript 環境中訪問，只有到當進入一個執行上下文中，這個執行上下文的變量對象纔會被激活，因此才叫 activation object 吶，而只有被激活的變量對象，也就是活動對象上的各類屬性才能被訪問。

活動對象是在進入函數上下文時刻被建立的，它經過函數的 arguments 屬性初始化。arguments 屬性值是 Arguments 對象。

執行過程

執行上下文的代碼會分紅兩個階段進行處理：分析和執行，咱們也能夠叫作：

1. 進入執行上下文
2. 代碼執行

進入執行上下文

當進入執行上下文時，這時候尚未執行代碼，

變量對象會包括：

1. 函數的全部形參 (若是是函數上下文)

   • 由名稱和對應值組成的一個變量對象的屬性被建立
   • 沒有實參，屬性值設爲 undefined

2. 函數聲明

   • 由名稱和對應值（函數對象(function-object)）組成一個變量對象的屬性被建立
   • 若是變量對象已經存在相同名稱的屬性，則徹底替換這個屬性

3. 變量聲明

   • 由名稱和對應值（undefined）組成一個變量對象的屬性被建立；
   • 若是變量名稱跟已經聲明的形式參數或函數相同，則變量聲明不會干擾已經存在的這類屬性

舉個例子：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);複製代碼

在進入執行上下文後，這時候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}複製代碼

代碼執行

在代碼執行階段，會順序執行代碼，根據代碼，修改變量對象的值

仍是上面的例子，當代碼執行完後，這時候的 AO 是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}複製代碼

到這裏變量對象的建立過程就介紹完了，讓咱們簡潔的總結咱們上述所說：

1. 全局上下文的變量對象初始化是全局對象

2. 函數上下文的變量對象初始化只包括 Arguments 對象

3. 在進入執行上下文時會給變量對象添加形參、函數聲明、變量聲明等初始的屬性值

4. 在代碼執行階段，會再次修改變量對象的屬性值

思考題

最後讓咱們看幾個例子：

1.第一題

function foo() {
    console.log(a);
    a = 1;
}

foo(); // ???

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???複製代碼

第一段會報錯：Uncaught ReferenceError: a is not defined。

第二段會打印：1。

這是由於函數中的 "a" 並無經過 var 關鍵字聲明，全部不會被存放在 AO 中。

第一段執行 console 的時候， AO 的值是：

AO = {
    arguments: {
        length: 0
    }
}複製代碼

沒有 a 的值，而後就會到全局去找，全局也沒有，因此會報錯。

當第二段執行 console 的時候，全局對象已經被賦予了 a 屬性，這時候就能夠從全局找到 a 的值，因此會打印 1。

2.第二題

console.log(foo);

function foo(){
    console.log("foo");
}

var foo = 1;複製代碼

會打印函數，而不是 undefined 。

這是由於在進入執行上下文時，首先會處理函數聲明，其次會處理變量聲明，若是若是變量名稱跟已經聲明的形式參數或函數相同，則變量聲明不會干擾已經存在的這類屬性。

下一篇文章

《JavaScript深刻之做用域鏈》

本文相關連接

《JavaScript深刻之執行上下文棧》

深刻系列

JavaScript深刻系列目錄地址：github.com/mqyqingfeng…。

JavaScript深刻系列預計寫十五篇左右，旨在幫你們捋順JavaScript底層知識，重點講解如原型、做用域、執行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。

若是有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。若是喜歡或者有所啓發，歡迎star，對做者也是一種鼓勵。