變量對象

這一節聊一下變量對象。都是乾貨(＾▽＾)

變量對象是函數運轉時數據的鳩合，存儲了在高低文中定義的變量和函數，差別的函數的變量對象稍有差別。

照樣從高低文提及，javascript 引擎實行到函數的時候會向高低文棧中壓入一個高低文。
高低文中包括：

偽代碼：

// 全局高低文的偽代碼
windowEC = {
    VO: Window,
    scopeChain: {},
    this: Window
}

• 作用域鏈為當前函數供應上層可接見變量和函數的有序鳩合；
• this為函數供應運轉時對象環境；
• 變量對象供應當前函數定義時的變量和函數；

高低文天生時包括的作用域鏈的構成，和this的指向準繩在前面的章節已梳理過。
javascript 中主要有全局高低文、函數高低文。先相識一下函數挪用時高低文棧的變化。

高低文棧狀況

當函數被挪用的時候，一個新的高低文會被加入到高低文棧的頂部, 而後會運轉函數內部的代碼塊。

所以一個實行高低文或許說函數的生命周期分為高低文豎立階段、函數運轉階段，差別階段高低文棧狀況和變量對象屬性會不一樣。

示例代碼：

function foo (a) {
    var b = 1
    function c () {
        console.log(a + b) // 100
    }
    c()
}
foo(99)

實行高低文豎立階段

在這個階段高低文對象會天生，並豎立變量對象、豎立作用域鏈、肯定 this 的指向。

說一千道一萬還不如來張圖痛快。

foo 函數高低文豎立完成后的棧狀況示意圖：

注重：此時函數內表達式和語句未實行，變量對象屬性值是根據劃定規矩被設置為初始值的。

運轉階段

高低文天生完成后，進入函數運轉階段。順次根據代碼遞次實行函數內代碼（變量的賦值、表達式盤算、語句的實行，其他函數挪用等）。

在該階段會接見或設置變量對象（運動對象）屬性的值。當實行完 foo 函數內第一行代碼var b = 1，此時棧狀況:

以此類推，每次函數表達式實行時都邑在實行高低文長中獵取標識符的值，經由歷程運算后又將效果保存在指定的標識符里。因而實行高低文為函數供應一個類似於寄存器的觀點來治理數據的功用。

當函數實行完后，對應的實行高低文被燒毀。JavaScript 實行器會返回父函數或根據源代碼遞次跳轉到其他函數。

函數高低文

在函數高低文中，我們用運動對象(activation object, AO)來示意變量對象。

運動對象和變量對象實際上是一個東西，只是變量對象是範例上的或許說是引擎完成上的，不可在 JavaScript 環境中接見，只需到當進入一個實行高低文中，這個實行高低文的變量對象才會被激活，所以才叫 activation object ，而只需被激活的變量對象，也就是運動對象上的種種屬性才被接見。

運動對象也是在進入函數高低文時候被豎立的，運動對象是變量對象的一種激活狀況。所以當你把變量對象和運動對象記殽雜了沒關係，因為他們實質上對我們明白函數挪用時的細節沒有影響。我在大多數時候也直接用變量對象來表述。

變量對象的豎立

變量對象的豎立主假如舉行標識符值範例的說明和初始化，順從下面這3條準繩：

1. 天生 arguments 對象。搜檢當前高低文的形參，天生屬性與屬性值對象(key: value)

   • 當形參沒有被賦值時， 屬性值被設置為 undefined

2. 在變量對象上豎立函數索引。搜檢當前作用域定義的 function，在變量對象中以函數名為 key， 以函數地點內存地點為 value 豎立索引。

   • 假如函數名已在變量對象中，則該函數名對應的函數會被新的函數替代。所以函數能夠被反覆定義，后定義的函數會覆蓋掉先前定義的。

3. 說明變量。搜檢當前作用域定義的變量，在變量對象中以變量名為 key， 以 undefined 為值掛載內部變量。

   • 假如新說明的變量名與已說明的形參名、函數名雷同，則說明會被揚棄。

所以須要注重的是函數說明比變量說明優先級高，一旦函數說明佔用了某一個標識符，後續的變量說明假如運用的是先前運用過的函數標識符， 則該變量說明無效。

栗子1：

function foo () {
    function too() {
    }
    var too
    console.log(typeof too)
}
foo()
// function
// 變量 too 的說明無效

我們把上面的栗子稍作修正， 栗子2：

function foo () {
    function too() {
    }
    var too = 1
    console.log(typeof too)
}
foo()
// number
// 變量 too 的值範例為 number

變量 too 的值範例為 number, 看到這個栗子人人可能會迷惑， 因為根據上面的3條劃定規矩， too 的第二次說明應該是無效的且 too 的範例應該為 function。 實在 too 的值範例在高低文豎立階段確實是 function， 因為 javascript 是動態弱範例言語， 在高低文實行階段 var too = 1 實質是在給 too 賦值而且發生了隱式範例轉換， 所以在實行階段 too 變成了 number 範例。es6 語法中已不發起運用var 來說明變量了， 而是運用let 來說明局部變量，從語法層面強迫避免了反覆的變量說明， 如許栗子2中的狀況會直接報錯。

將上面的栗子再次修正，進一步探究：

function foo () {
    function too() {
    }
    console.log(typeof too) // function
    var too = 1
    console.log(typeof too) // number
}
foo()

foo 函數運轉時會先打印 ‘function’，然後打印 ‘number’。起首表達式console.log(typeof too)實行時標識符too在高低文豎立階段被初始化為一個函數。var too = 1實行后標識符too被賦值為 1，所以第二次console.log(typeof too)的時候輸出的是number.

再再舉一個例子：

function foo () {
    console.log(a)
    console.log(bar)
    var a = 1
    function bar() {
        return 2
    }
}
foo()
// undefind
// ƒ bar() {
//      return 2
//  }

高低文豎立階段剖析函數內代碼塊后，會在變量對象上增加 ‘a’， ‘bar’ 兩個標識符，並添補響應的值完畢高低文的豎立階段進入foo 函數的實行階段。

在實行階段 foo 函數體第一行表達式請求打印輸出 a 的值， 因為 console.log(a) 之前沒有對 a 舉行任何賦值操縱，根據劃定規矩此時 a 的值為 undefind 所以輸出 ‘undefind’。函數體內第二行請求打印輸出 bar 的值，根據劃定規矩標識符 ‘bar’ 對應的是函數，所以 ‘bar’ 的值為函數實體，且在 console.log(bar) 之前也未對 bar 做賦值操縱，所以打印出來的是該函數。

變量對象豎立完，函數運轉前的變量對象是如許的：

// VO 為 Variable Object的縮寫，即變量對象
VO = {
    arguments: {...},
    bar: <bar reference>  // 示意bar的地點援用
    a: undefined
}

變量對象（運動對象）的豎立歷程實質上就是我們常常提起的函數變量提拔，這裏3條準繩才是變量提拔的實質。

假如沒有明白透闢能夠轉頭看看前面的內容。

全局高低文

在瀏覽器中，全局對象就是 window ，也是瀏覽器供應的預定義變量對象，能夠經由歷程 this和self 援用。全局對象供應瀏覽器預置對象 Array、Object、console.log、alert 等，全局高低文的生命周期和函數的生命周期一樣，只需順序運轉不完畢全局高低文就一向存在。其他一切的高低文環境，都能直接接見全局高低文的屬性。

全局對象是預定義的對象，作為 JavaScript 的全局函數和全局屬性的佔位符。經由歷程運用全局對象，能夠接見一切其他一切預定義的對象、函數和屬性。在頂層 JavaScript 代碼中，能夠用關鍵字 this 援用全局對象。因為全局對象是作用域鏈的頭（最外層作用域），這意味着一切非限定性的變量和函數名都邑作為該對象的屬性來查詢。比方，當JavaScript 代碼援用 parseInt() 函數時，它援用的是全局對象的 parseInt 屬性。全局對象是作用域鏈的頭，還意味着在頂層 JavaScript 代碼中聲明的一切變量都將成為全局對象的屬性。

經由歷程this、seif接見全局對象：

console.log(this)
console.log(self)