變量對象+作用域鏈+閉包

Yangder 發(fā)布于2019-08-21 11:32 / 1758人閱讀

摘要：傳入值現(xiàn)在結(jié)果是正確的了創(chuàng)建了一個匿名函數(shù)，通過把變量作為參數(shù)傳進(jìn)去，這樣在執(zhí)行的時候，由于內(nèi)部的形參能夠訪問到變量，所以無需到父級作用域鏈上進(jìn)行尋找，因此最后輸出達(dá)到預(yù)期目的。

下文根據(jù)湯姆大叔的深入javascript系列文章刪改，如果想深入理解請閱讀湯姆大叔的系列文章。
http://www.cnblogs.com/TomXu/...

變量對象 初步介紹

變量對象(縮寫為VO)是一個與執(zhí)行上下文相關(guān)的特殊對象，它存儲著在上下文中聲明的以下內(nèi)容：
    變量 (var, 變量聲明);
    函數(shù)聲明 (FunctionDeclaration, 縮寫為FD);
    函數(shù)的形參

我們可以用普通的ECMAScript對象來表示一個變量對象：

VO = {};

VO是執(zhí)行上下文的屬性(property)，所以：

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

只有全局上下文的變量對象允許通過VO的屬性名稱來間接訪問(因為在全局上下文里，全局對象自身就是變量對象)，在其它上下文中是不能直接訪問VO對象的，因為它只是內(nèi)部機(jī)制的一個實現(xiàn)。

全局上下文中的變量對象

只有全局上下文的變量對象允許通過VO的屬性名稱來間接訪問

在全局上下文中，有

VO(globalContext) === global;

因為我們在全局上下文中聲明的變量等都是存在全局的變量對象中，而在全局上下文中的全局變量對象又是全局對象本身。所以我們可以通過VO的屬性名稱間接訪問

var a = new String("test");
 
alert(a); // 直接訪問，在VO(globalContext)里找到："test"
 
alert(window["a"]); // 間接通過global訪問：global === VO(globalContext): "test"
alert(a === this.a); // true
 
var aKey = "a";
alert(window[aKey]); // 間接通過動態(tài)屬性名稱訪問："test"

函數(shù)上下文中的變量對象

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

VO(functionContext) === AO;

在理解函數(shù)上下文中的變量對象時，我們通過處理上下文代碼的2個階段來進(jìn)行理解

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

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

進(jìn)入執(zhí)行上文文的時候，也即是代碼執(zhí)行之前，此時VO包含了下列屬性

函數(shù)形參
函數(shù)聲明
變量聲明

其中，函數(shù)聲明的等級最高，然后是函數(shù)形參，最后才是變量聲明。越高等級的聲明可以覆蓋低等級的聲明。

執(zhí)行代碼

這個周期內(nèi)，AO/VO已經(jīng)擁有了屬性(不過，并不是所有的屬性都有值，大部分屬性的值還是系統(tǒng)默認(rèn)的初始值undefined )。這個時候會進(jìn)行賦值操作以及執(zhí)行代碼。

alert(x); // function
 
var x = 10;
alert(x); // 10
 
x = 20;
 
function x() {};
 
alert(x); // 20

在進(jìn)入上下文階段，由于函數(shù)具有最高的級別，所以第一次alert(x)輸出的是函數(shù)。之后進(jìn)行變量賦值，分別alert 10 20。

function bar (x){
    alert(x);
    var x = 2;
}
bar(3); //3

由于形參聲明比變量聲明級別高，所以alert(3)，因為在進(jìn)入執(zhí)行上下文時變量無法覆蓋形參聲明，所以輸出的是3而不是undefined。

不使用var可以聲明一個全局變量，這句話是錯誤的。

alert(a); // undefined
alert(b); // "b" 沒有聲明，報錯
 
b = 10;
var a = 20;

作用域鏈

函數(shù)上下文的作用域鏈在函數(shù)調(diào)用時創(chuàng)建的，包含活動對象和這個函數(shù)內(nèi)部的[[scope]]屬性。函數(shù)上下文包括以下內(nèi)容：

activeExecutionContext = {
    VO: {...}, // or AO
    this: thisValue,
    Scope: [ // Scope chain
      // 所有變量對象的列表
      // for identifiers lookup
    ]
};

其scope定義如下：

Scope = AO + [[Scope]]

[[scope]]是所有父變量對象的層級鏈，處于當(dāng)前函數(shù)上下文之上，在函數(shù)創(chuàng)建時存于其中。

注意這重要的一點(diǎn)－－[[scope]]在函數(shù)創(chuàng)建時被存儲－－靜態(tài)（不變的），永遠(yuǎn)永遠(yuǎn)，直至函數(shù)銷毀。即：函數(shù)可以永不調(diào)用，但[[scope]]屬性已經(jīng)寫入，并存儲在函數(shù)對象中。

另外一個需要考慮的是－－與作用域鏈對比，[[scope]]是函數(shù)的一個屬性而不是上下文。

因此我個人的理解是作用域鏈應(yīng)該是函數(shù)本身的活動對象+父級的變量對象。其中函數(shù)本身的活動對象總是排在第一位，在尋找標(biāo)識符的時候，如果在當(dāng)前活動對象找不到，那么會遍歷作用域鏈上的父級變量對象。其中[[scope]]在函數(shù)創(chuàng)建時被存儲，與函數(shù)共存亡。

var x = 10;
 
function foo() {
  alert(x);
}
 
(function () {
  var x = 20;
  foo(); // 10, but not 20
})();

說明函數(shù)的作用域鏈在函數(shù)創(chuàng)建的時候就已經(jīng)定義好了，是靜態(tài)的，不因為調(diào)用的時候而改變。

閉包 作用域鏈的加深理解

var firstClosure;
var secondClosure;

function foo() {

  var x = 1;

  firstClosure = function () { return ++x; };
  secondClosure = function () { return --x; };

  x = 2; // 影響 AO["x"], 在2個閉包公有的[[Scope]]中

  alert(firstClosure()); // 3, 通過第一個閉包的[[Scope]]
}

foo();

alert(firstClosure()); // 4
alert(secondClosure()); // 3

firstClosure和secondClosure兩個函數(shù)創(chuàng)建的時候，內(nèi)部的變量x都是從父級函數(shù)foo的變量對象x中引用，所以其實兩個函數(shù)都是共享一個作用域，因此導(dǎo)致x變量共通了。

經(jīng)典閉包

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}

data[0](); // 3, 而不是0
data[1](); // 3, 而不是1
data[2](); // 3, 而不是2

解釋跟上面類似。function在創(chuàng)建的時候，內(nèi)部的變量k通過訪問作用域鏈即是父級的變量對象k拿到，而當(dāng)函數(shù)被調(diào)用的時候，for循環(huán)早已執(zhí)行完畢，此時的K是3，所以三個函數(shù)調(diào)用的時候輸出的值都為3。

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 傳入"k"值
}

// 現(xiàn)在結(jié)果是正確的了
data[0](); // 0
data[1](); // 1
data[2](); // 2

創(chuàng)建了一個匿名函數(shù)，通過把k變量作為參數(shù)傳進(jìn)去，這樣在執(zhí)行function的時候，由于內(nèi)部的形參能夠訪問到k變量，所以無需到父級作用域鏈上進(jìn)行尋找，因此最后輸出達(dá)到預(yù)期目的。

閉包的理論定義

這里說明一下，開發(fā)人員經(jīng)常錯誤將閉包簡化理解成從父上下文中返回內(nèi)部函數(shù)，甚至理解成只有匿名函數(shù)才能是閉包。

ECMAScript中，閉包指的是：

1.從理論角度：所有的函數(shù)。因為它們都在創(chuàng)建的時候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因為函數(shù)中訪問全局變量就相當(dāng)于是在訪問自由變量，這個時候使用最外層的作用域。

2.從實踐角度：以下函數(shù)才算是閉包：
    1.即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在（比如，內(nèi)部函數(shù)從父函數(shù)中返回）
    2.在代碼中引用了自由變量