變量對(duì)象+作用域鏈+閉包

ygyooo 發(fā)布于2019-08-01 16:27 / 3304人閱讀

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

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

變量對(duì)象 初步介紹

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

我們可以用普通的ECMAScript對(duì)象來表示一個(gè)變量對(duì)象：

VO = {};

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

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

只有全局上下文的變量對(duì)象允許通過VO的屬性名稱來間接訪問(因?yàn)樵谌稚舷挛睦?，全局?duì)象自身就是變量對(duì)象)，在其它上下文中是不能直接訪問VO對(duì)象的，因?yàn)樗皇莾?nèi)部機(jī)制的一個(gè)實(shí)現(xiàn)。

全局上下文中的變量對(duì)象

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

在全局上下文中，有

VO(globalContext) === global;

因?yàn)槲覀冊(cè)谌稚舷挛闹新暶鞯淖兞康榷际谴嬖谌值淖兞繉?duì)象中，而在全局上下文中的全局變量對(duì)象又是全局對(duì)象本身。所以我們可以通過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]); // 間接通過動(dòng)態(tài)屬性名稱訪問："test"

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

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

VO(functionContext) === AO;

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

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

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

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

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

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

執(zhí)行代碼

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

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

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

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

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

不使用var可以聲明一個(gè)全局變量，這句話是錯(cuò)誤的。

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

作用域鏈

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

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

其scope定義如下：

Scope = AO + [[Scope]]

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

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

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

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

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

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

閉包 作用域鏈的加深理解

var firstClosure;
var secondClosure;

function foo() {

  var x = 1;

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

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

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

foo();

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

firstClosure和secondClosure兩個(gè)函數(shù)創(chuàng)建的時(shí)候，內(nèi)部的變量x都是從父級(jí)函數(shù)foo的變量對(duì)象x中引用，所以其實(shí)兩個(gè)函數(shù)都是共享一個(gè)作用域，因此導(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)建的時(shí)候，內(nèi)部的變量k通過訪問作用域鏈即是父級(jí)的變量對(duì)象k拿到，而當(dāng)函數(shù)被調(diào)用的時(shí)候，for循環(huán)早已執(zhí)行完畢，此時(shí)的K是3，所以三個(gè)函數(shù)調(diào)用的時(shí)候輸出的值都為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)建了一個(gè)匿名函數(shù)，通過把k變量作為參數(shù)傳進(jìn)去，這樣在執(zhí)行function的時(shí)候，由于內(nèi)部的形參能夠訪問到k變量，所以無需到父級(jí)作用域鏈上進(jìn)行尋找，因此最后輸出達(dá)到預(yù)期目的。

閉包的理論定義

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

ECMAScript中，閉包指的是：

1.從理論角度：所有的函數(shù)。因?yàn)樗鼈兌荚趧?chuàng)建的時(shí)候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因?yàn)楹瘮?shù)中訪問全局變量就相當(dāng)于是在訪問自由變量，這個(gè)時(shí)候使用最外層的作用域。

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