JavaScript內(nèi)功之變量對(duì)象

目錄

• 前言
• 一、變量對(duì)象
• 二、全局變量對(duì)象
• 三、函數(shù)變量對(duì)象
• 寫(xiě)在最后

（免費(fèi)學(xué)習(xí)推薦：javascript視頻教程）

前言

JavaScript編程的時(shí)候總避免不了聲明函數(shù)和變量，以成功構(gòu)建我們的系統(tǒng)，但是解釋器是如何并且在什么地方去查找這些函數(shù)和變量呢？我們引用這些對(duì)象的時(shí)候究竟發(fā)生了什么？

在上篇《JavaScript中的執(zhí)行上下文》中我們提到了一部分，當(dāng) JavaScript 代碼執(zhí)行一段可執(zhí)行代碼(executable code)時(shí)，會(huì)創(chuàng)建對(duì)應(yīng)的執(zhí)行上下文(execution context)。

對(duì)于每個(gè)執(zhí)行上下文，都有三個(gè)重要屬性：

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

一、變量對(duì)象

在函數(shù)上下文中，我們用活動(dòng)對(duì)象(activation object, AO)來(lái)表示變量對(duì)象。

活動(dòng)對(duì)象和變量對(duì)象其實(shí)是一個(gè)東西：

1. 變量對(duì)象是規(guī)范上的或者說(shuō)是引擎實(shí)現(xiàn)上的，不可在 JavaScript 環(huán)境中訪問(wèn)
2. 只有到當(dāng)進(jìn)入一個(gè)執(zhí)行上下文中，這個(gè)執(zhí)行上下文的變量對(duì)象才會(huì)被激活，所以才叫 activation object 吶，而只有被激活的變量對(duì)象，也就是活動(dòng)對(duì)象上的各種屬性才能被訪問(wèn)。

這里附上一張貘大對(duì)于兩者關(guān)系的回答：

我們可以將變量對(duì)象的創(chuàng)建過(guò)程用代碼模擬一下：

1.我們用普通的對(duì)象來(lái)表示變量對(duì)象

var VO = {}; // 變量對(duì)象

2.而變量對(duì)象是執(zhí)行上下文的一個(gè)屬性：

activeContext = {   VO: {     // 上下文數(shù)據(jù)（var, FD, function arguments)   }};

3.當(dāng)我們遇到下面的代碼時(shí)：

var a = 10;function func(x){     var b = 20;}func(30);

4.對(duì)應(yīng)的變量對(duì)象應(yīng)該是：

// 全局變量對(duì)象VO(Global) = {     a: 10,     func: reference to function plus(){}}// func函數(shù)上下文的變量對(duì)象VO(func functionContext) = {   x: 30,   b: 20};

因?yàn)椴煌瑘?zhí)行上下文下的變量對(duì)象稍有不同，所以我們分開(kāi)來(lái)說(shuō)。

二、全局變量對(duì)象

我們先了解一個(gè)概念，叫全局對(duì)象。在 W3School 中也有介紹：

全局對(duì)象是預(yù)定義的對(duì)象，作為 JavaScript 的全局函數(shù)和全局屬性的占位符。通過(guò)使用全局對(duì)象，可以訪問(wèn)所有其他所有預(yù)定義的對(duì)象、函數(shù)和屬性。

1.可以通過(guò) this 引用，在客戶端 JavaScript 中，全局對(duì)象就是 Window 對(duì)象。

console.log(this); //Window

2.全局對(duì)象是由 Object 構(gòu)造函數(shù)實(shí)例化的一個(gè)對(duì)象。

console.log(this instanceof Object); // true

3.預(yù)定義了一堆，嗯，一大堆函數(shù)和屬性。

// 都能生效console.log(Math.random());  //隨機(jī)數(shù)console.log(this.Math.random()); //隨機(jī)數(shù)

4.作為全局變量的宿主（很牛的樣子）

var a = 1;console.log(this.a);// 1

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

var a = 1;console.log(window.a); // 1this.window.b = 2;console.log(this.b); // 2

而全局上下文中的變量對(duì)象就是全局對(duì)象！

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

在函數(shù)執(zhí)行上下文中，VO是不能直接訪問(wèn)的，此時(shí)由活動(dòng)對(duì)象(activation object,縮寫(xiě)為AO)扮演VO的角色。

VO(functionContext) === AO

活動(dòng)對(duì)象是在進(jìn)入函數(shù)上下文時(shí)刻被創(chuàng)建的，它通過(guò)函數(shù)的arguments屬性初始化。arguments屬性的值是Arguments對(duì)象：

AO = {     arguments: <ArgO>}

Arguments對(duì)象是活動(dòng)對(duì)象的一個(gè)屬性，它包括如下屬性：

1. callee — 指向當(dāng)前函數(shù)的引用
2. length — 真正傳遞的參數(shù)個(gè)數(shù)
3. properties-indexes (字符串類型的整數(shù)) 屬性的值就是函數(shù)的參數(shù)值(按參數(shù)列表從左到右排列)。
4. properties-indexes內(nèi)部元素的個(gè)數(shù)等于arguments.length. properties-indexes 的值和實(shí)際傳遞進(jìn)來(lái)的參數(shù)之間是共享的。

我們來(lái)看下面代碼：

function foo(x, y, z) {     // 聲明的函數(shù)參數(shù)數(shù)量arguments (x, y, z)   alert(foo.length); // 3     // 真正傳進(jìn)來(lái)的參數(shù)個(gè)數(shù)(only x, y)   alert(arguments.length); // 2     // 參數(shù)的callee是函數(shù)自身   alert(arguments.callee === foo); // true     // 參數(shù)共享     alert(x === arguments[0]); // true   alert(x); // 10     arguments[0] = 20;   alert(x); // 20     x = 30;   alert(arguments[0]); // 30     // 不過(guò)，沒(méi)有傳進(jìn)來(lái)的參數(shù)z，和參數(shù)的第3個(gè)索引值是不共享的    z = 40;   alert(arguments[2]); // undefined     arguments[2] = 50;   alert(z); // 40  }  foo(10, 20);

3.1 執(zhí)行過(guò)程

執(zhí)行上下文的代碼會(huì)分成兩個(gè)階段進(jìn)行處理：分析和執(zhí)行，我們也可以叫做：

1. 進(jìn)入執(zhí)行上下文
2. 代碼執(zhí)行

3.2 進(jìn)入執(zhí)行上下文

當(dāng)進(jìn)入執(zhí)行上下文時(shí)，這時(shí)候還沒(méi)有執(zhí)行代碼，

變量對(duì)象會(huì)包括：

1. 函數(shù)的所有形參 (如果是函數(shù)上下文)

   • 由名稱和對(duì)應(yīng)值組成的一個(gè)變量對(duì)象的屬性被創(chuàng)建
   • 沒(méi)有實(shí)參，屬性值設(shè)為 undefined

2. 函數(shù)聲明

   • 由名稱和對(duì)應(yīng)值（函數(shù)對(duì)象(function-object)）組成一個(gè)變量對(duì)象的屬性被創(chuàng)建
   • 如果變量對(duì)象已經(jīng)存在相同名稱的屬性，則完全替換這個(gè)屬性

3. 變量聲明

   • 由名稱和對(duì)應(yīng)值（undefined）組成一個(gè)變量對(duì)象的屬性被創(chuàng)建；
   • 如果變量名稱跟已經(jīng)聲明的形式參數(shù)或函數(shù)相同，則變量聲明不會(huì)干擾已經(jīng)存在的這類屬性

舉個(gè)例子：

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

在進(jìn)入執(zhí)行上下文后，這時(shí)候的 AO 是：

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

3.3 代碼執(zhí)行

在代碼執(zhí)行階段，會(huì)順序執(zhí)行代碼，根據(jù)代碼，修改變量對(duì)象的值

還是上面的例子，當(dāng)代碼執(zhí)行完后，這時(shí)候的 AO 是：

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

到這里變量對(duì)象的創(chuàng)建過(guò)程就介紹完了，讓我們簡(jiǎn)潔的總結(jié)我們上述所說(shuō)：

1. 全局上下文的變量對(duì)象初始化是全局對(duì)象;
2. 函數(shù)上下文的變量對(duì)象初始化只包括 Arguments 對(duì)象;
3. 在進(jìn)入執(zhí)行上下文時(shí)會(huì)給變量對(duì)象添加形參、函數(shù)聲明、變量聲明等初始的屬性值;
4. 在代碼執(zhí)行階段，會(huì)再次修改變量對(duì)象的屬性值;

思考題

最后讓我們看幾個(gè)例子：

1.第一題

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

第一段會(huì)報(bào)錯(cuò)：Uncaught ReferenceError: a is not defined。

第二段會(huì)打印：1。

這是因?yàn)楹瘮?shù)中的 “a” 并沒(méi)有通過(guò) var 關(guān)鍵字聲明，所有不會(huì)被存放在 AO 中。

第一段執(zhí)行 console 的時(shí)候， AO 的值是：

AO = {     arguments: {         length: 0     }}

沒(méi)有 a 的值，然后就會(huì)到全局去找，全局也沒(méi)有，所以會(huì)報(bào)錯(cuò)。

當(dāng)?shù)诙螆?zhí)行 console 的時(shí)候，全局對(duì)象已經(jīng)被賦予了 a 屬性，這時(shí)候就可以從全局找到 a 的值，所以會(huì)打印 1。

2.第二題

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

會(huì)打印函數(shù)，而不是 undefined 。

這是因?yàn)樵谶M(jìn)入執(zhí)行上下文時(shí)，首先會(huì)處理函數(shù)聲明，其次會(huì)處理變量聲明，如果如果變量名稱跟已經(jīng)聲明的形式參數(shù)或函數(shù)相同，則變量聲明不會(huì)干擾已經(jīng)存在的這類屬性。

相關(guān)免費(fèi)學(xué)習(xí)推薦：javascript（視頻）