JavaScript之變量對(duì)象

codeGoogle 發(fā)布于2019-08-23 12:23 / 1172人閱讀

摘要：用偽代碼來(lái)表示函數(shù)未進(jìn)入執(zhí)行階段之前，變量對(duì)象中的屬性都不能訪(fǎng)問(wèn)但是進(jìn)入執(zhí)行階段之后，變量對(duì)象轉(zhuǎn)變?yōu)榱嘶顒?dòng)對(duì)象。全局上下文中，變量對(duì)象就是本身。函數(shù)上下文中，變量對(duì)象包括函數(shù)聲明，變量聲明。

概述

JavaScript 的可執(zhí)行代碼，具有執(zhí)行上下文，而每個(gè)上下文包括以下 3 個(gè)屬性：

變量對(duì)象（variable object, 簡(jiǎn)稱(chēng) VO）

作用域鏈（scope chain）

this

變量對(duì)象提供了當(dāng)前環(huán)境所需的變量和函數(shù)
作用域鏈用于保證 JS 中變量和函數(shù)有序地訪(fǎng)問(wèn)
this 為函數(shù)提供了執(zhí)行者對(duì)象

一個(gè)上下文的執(zhí)行周期可以用下圖示意：

本文就來(lái)介紹執(zhí)行上下文中的變量對(duì)象。

那什么是變量對(duì)象呢？先看定義：

變量對(duì)象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域，用于存儲(chǔ)執(zhí)行上下文中的變量和函數(shù)聲明。

不同的執(zhí)行上下文，變量對(duì)象會(huì)有一些差別。接下來(lái)就分別針對(duì)不同的上下文討論其區(qū)別。

一、全局上下文

全局對(duì)象(Global object) 是在進(jìn)入任何執(zhí)行上下文之前就已經(jīng)創(chuàng)建了的對(duì)象；
這個(gè)對(duì)象只存在一份，它的屬性在程序中任何地方都可以訪(fǎng)問(wèn)，全局對(duì)象的生命周期終止于程序退出那一刻。

在全局代碼的上下文執(zhí)行環(huán)境中，變量對(duì)象就是全局對(duì)象，在瀏覽器中，就是 window 對(duì)象。

此時(shí)，我們可以用 this 和 self 來(lái)訪(fǎng)問(wèn)到全局對(duì)象，也就是它本身

console.log(this)  // window
console.log(self)  // window

其次，全局對(duì)象初始創(chuàng)建階段將 Math、String、Date、parseInt 等函數(shù)作為自身方法，還會(huì)把全局變量作為自己的屬性。

用偽代碼表示就是：

global = {
    Math: <...>
    Date: <...>
    window: global  // 引用自身
}

二、函數(shù)上下文

我們已經(jīng)知道，變量對(duì)象存儲(chǔ)量執(zhí)行上下文中的函數(shù)聲明和變量，在函數(shù)上下文中，多了 arguments(函數(shù)參數(shù)列表), 一個(gè)類(lèi)數(shù)組對(duì)象。

用偽代碼來(lái)表示：

VO = {
    arguments: Arguments,
    variables: undefine,
    functionName: 
}

函數(shù)未進(jìn)入執(zhí)行階段之前，變量對(duì)象中的屬性都不能訪(fǎng)問(wèn)！但是進(jìn)入執(zhí)行階段之后，變量對(duì)象轉(zhuǎn)變?yōu)榱嘶顒?dòng)對(duì)象（activation object）。

所以，在函數(shù)上下文中，我們將活動(dòng)對(duì)象（activation object）作為變量對(duì)象，活動(dòng)對(duì)象最開(kāi)始只包含一個(gè)變量就是 arguments 對(duì)象（這個(gè)對(duì)象是全局環(huán)境中沒(méi)有的）。

arguments 的屬性值 Arguments 它包括如下屬性：

callee — 誰(shuí)調(diào)用了本函數(shù)

length — 真正傳遞的參數(shù)個(gè)數(shù)

properties-indexes (字符串類(lèi)型的整數(shù)) 屬性的值就是函數(shù)的參數(shù)值(按參數(shù)列表從左到右排列)

三、創(chuàng)建過(guò)程

我們?cè)僖淮蝸?lái)看這個(gè)過(guò)程圖：

創(chuàng)建階段

全局對(duì)象初始化的時(shí)候，就將變量對(duì)象引用了自身。
而函數(shù)的創(chuàng)建卻有需要注意的地方。

函數(shù)在創(chuàng)建階段就創(chuàng)建了變量對(duì)象
其中，變量對(duì)象包括：

當(dāng)前函數(shù)的參數(shù)列表，建立 Arguments 對(duì)象。

所有的函數(shù)聲明（不包括函數(shù)表達(dá)式哦!），直接指向函數(shù)

所有的變量聲明（var 聲明的變量），默認(rèn)為 undefined

進(jìn)入執(zhí)行上下文時(shí)，函數(shù)聲明和變量聲明都會(huì)提前，這就是聲明提升，但是變量聲明的值都是undefined，而函數(shù)聲明的變量已經(jīng)可以指向函數(shù)。變量聲明的優(yōu)先級(jí)最低。

看下面這段代碼：

function foo(a, b) {
  var c = 10;
  function d() {}
  var e = function _e() {};
  (function x() {});
}
  
foo(10);

當(dāng)進(jìn)入函數(shù) foo 時(shí)，其變量對(duì)象的表現(xiàn)形式為：

VO = {
    arguments: {
        0: 10,
        1: undefined,
        length: 1
    }
    c: undefined,
    d: ,
    e: undefined,
}

x 是函數(shù)表達(dá)式，所以不在變量對(duì)象當(dāng)中，e 變量引用的值也是函數(shù)表達(dá)式，所以變量 e 本身是聲明，所以在變量對(duì)象當(dāng)中。

執(zhí)行階段

當(dāng)前進(jìn)入執(zhí)行階段，變量對(duì)象激活成活動(dòng)對(duì)象，函數(shù)會(huì)順序執(zhí)行代碼，改變變量對(duì)象的值：
以上代碼就變成：

AO = {
    arguments: {
        0: 10,
        1: undefined,
        length: 1
    }
    c: 10,
    d: ,
    e: ,
}

接下來(lái)看一段代碼：

console.log(foo);

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

var foo = "456";

以上會(huì)打印函數(shù)，是因?yàn)椋?/p>

變量?jī)?yōu)先處理函數(shù)聲明，再是變量聲明。

再看一段代碼：

if (true) {
  var a = 1;
} else {
  var b = 2;
}
console.log(a);  // 1
console.log(b);  // undefined

雖然 else 中的代碼永遠(yuǎn)不會(huì)被執(zhí)行，但是 b 的變量聲明在執(zhí)行之前就默認(rèn)被設(shè)置成 undefined了。

總結(jié)

執(zhí)行上下文包括三個(gè)屬性，變量對(duì)象，作用域鏈，this, 不同的執(zhí)行上下文，變量對(duì)象是有區(qū)別的。

全局上下文中，變量對(duì)象就是本身。

函數(shù)上下文中，變量對(duì)象包括：arguments, 函數(shù)聲明，變量聲明。在函數(shù)創(chuàng)建階段，變量對(duì)象有默認(rèn)值，進(jìn)入執(zhí)行階段后，變量對(duì)象會(huì)被激活成活動(dòng)對(duì)象，然后變量對(duì)象的值被順序改變。