JavaScript深入之變量對象

Zachary 發布于2019-08-21 15:34 / 2941人閱讀

摘要：深入系列第四篇，具體講解執行上下文中的變量對象與活動對象。下一篇文章深入之作用域鏈本文相關鏈接深入之執行上下文棧深入系列深入系列目錄地址。

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 對象。

執行過程

執行上下文的代碼會分成兩個階段進行處理：分析和執行，我們也可以叫做：

進入執行上下文

代碼執行

進入執行上下文

當進入執行上下文時，這時候還沒有執行代碼，

變量對象會包括：

函數的所有形參 (如果是函數上下文)

由名稱和對應值組成的一個變量對象的屬性被創建

沒有實參，屬性值設為 undefined

函數聲明

由名稱和對應值（函數對象(function-object)）組成一個變量對象的屬性被創建

如果變量對象已經存在相同名稱的屬性，則完全替換這個屬性

變量聲明

由名稱和對應值（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"
}

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

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

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

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

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

思考題

最后讓我們看幾個例子：

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深入系列目錄地址：https://github.com/mqyqingfeng/Blog。

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

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

云服務器 GPU云服務器深入理解webrtc之aec 深入javascript javascript深入深入java面向對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88230.html

JavaScript深入之作用域鏈

摘要：下面，讓我們以一個函數的創建和激活兩個時期來講解作用域鏈是如何創建和變化的。這時候執行上下文的作用域鏈，我們命名為至此，作用域鏈創建完畢。 JavaScript深入系列第五篇，講述作用鏈的創建過程，最后結合著變量對象，執行上下文棧，讓我們一起捋一捋函數創建和執行的過程中到底發生了什么？前言在《JavaScript深入之執行上下文棧》中講到，當JavaScript代碼執行一段可執行代...

waltr 2019-08-20 15:42 評論0 收藏0
JavaScript深入之執行上下文

摘要：深入系列第七篇，結合之前所講的四篇文章，以權威指南的為例，具體講解當函數執行的時候，執行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執行上下文棧中講到，當代碼執行一段可執行代碼時，會創建對應的執行上下文。 JavaScript深入系列第七篇，結合之前所講的四篇文章，以權威指南的demo為例，具體講解當函數執行的時候，執行上下文棧、變量對象、作用域鏈是如何變化的。前言在《Jav...

gougoujiang 2019-08-20 15:46 評論0 收藏0
【進階1-2期】JavaScript深入之執行上下文棧和變量對象

摘要：本計劃一共期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，點擊查看前端進階的破冰之旅本期推薦文章深入之執行上下文棧和深入之變量對象，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題是調用堆棧，今天是第二天。本計劃一共28期，每期...

Richard_Gao 2019-08-23 13:46 評論0 收藏0
JavaScript深入之閉包

摘要：深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義對閉包的定義為閉包是指那些能夠訪問自由變量的函數。 JavaScript深入系列第八篇，介紹理論上的閉包和實踐上的閉包，以及從作用域鏈的角度解析經典的閉包題。定義 MDN 對閉包的定義為：閉包是指那些能夠訪問自由變量的函數。那什么是自由變量呢？自由變量是指在函數中使用的，但既不是函數參數也...

caige 2019-08-20 16:07 評論0 收藏0
【進階2-3期】JavaScript深入之閉包面試題解

摘要：閉包面試題解由于作用域鏈機制的影響，閉包只能取得內部函數的最后一個值，這引起的一個副作用就是如果內部函數在一個循環中，那么變量的值始終為最后一個值。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第二期，本周的主題是作用域閉包，今天是第8天。本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了...

alanoddsoff 2019-08-23 13:47 評論0 收藏0