快捷導(dǎo)航

JavaScript作用域鏈實(shí)例詳解

更新時(shí)間：2019年01月21日 11:48:54 作者：saberVIII

這篇文章主要介紹了JavaScript作用域鏈,結(jié)合實(shí)例形式較為詳細(xì)的分析了作用域鏈的原理、功能與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript作用域鏈。分享給大家供大家參考，具體如下：

跟其他語(yǔ)言一樣，變量和函數(shù)的作用域揭示了這些變量和函數(shù)的搜索路徑。對(duì)于JavaScript而言，理解作用域更加重要，因?yàn)樵贘avaScript中，作用域可以用來(lái)確定this的值，并且JavaScript有閉包，閉包是可以訪問(wèn)外部環(huán)境的作用域的。
每一個(gè)JavaScript的函數(shù)都是Function對(duì)象的一個(gè)實(shí)例，F(xiàn)unction對(duì)象有一個(gè)內(nèi)部屬性[[Scope]]，這個(gè)屬性只能被JavaScript的引擎訪問(wèn)。通過(guò)[[Scope]]屬性可以訪問(wèn)函數(shù)的作用域鏈，從而可以搜索變量和函數(shù)，判斷變量和函數(shù)位于作用域鏈中的哪一個(gè)活動(dòng)對(duì)象中。

簡(jiǎn)單的作用域鏈

當(dāng)一個(gè)函數(shù)被創(chuàng)建的時(shí)候，因?yàn)楹瘮?shù)是Function對(duì)象的一個(gè)實(shí)例，因此也會(huì)有[[Scope]]這個(gè)內(nèi)部屬性，Scope屬性指向一個(gè)作用域鏈，作用域鏈中默認(rèn)至少包含一個(gè)全局對(duì)象變量。

function compare(value1, value2){
  if (value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}
var result = compare(5, 10);

以上代碼先定義了一個(gè)compare()函數(shù)，然后在全局作用域中調(diào)用了這個(gè)函數(shù)。在創(chuàng)建compare()函數(shù)的時(shí)候，該函數(shù)的作用域鏈如下圖所示：

當(dāng)compare()函數(shù)在全局作用域中被調(diào)用執(zhí)行的時(shí)候，JavaScript引擎會(huì)創(chuàng)建一個(gè)運(yùn)行時(shí)上下文(execution context)的內(nèi)部對(duì)象，一個(gè)運(yùn)行時(shí)上下文定義了一個(gè)函數(shù)執(zhí)行時(shí)的環(huán)境。函數(shù)誒次執(zhí)行時(shí)的運(yùn)行時(shí)上下文都是不同的，因此多次調(diào)用就會(huì)導(dǎo)致多個(gè)運(yùn)行時(shí)上下文的創(chuàng)建與銷(xiāo)毀。

每個(gè)運(yùn)行時(shí)上下文都有自己的作用域鏈，用于變量和函數(shù)這些標(biāo)識(shí)符的解析。

運(yùn)行時(shí)上下文在函數(shù)調(diào)用執(zhí)行時(shí)被創(chuàng)建，在函數(shù)執(zhí)行完畢的時(shí)候被銷(xiāo)毀。在運(yùn)行時(shí)上下文創(chuàng)建的時(shí)候，首先會(huì)復(fù)制該被調(diào)用函數(shù)的[[Scope]]屬性中的對(duì)象，然后一個(gè)活動(dòng)對(duì)象(作為變量對(duì)象使用)會(huì)被創(chuàng)建并推入運(yùn)行時(shí)上下文作用域鏈的前端。對(duì)于這個(gè)例子中compare()函數(shù)的運(yùn)行時(shí)上下文而言，其作用域鏈包含兩個(gè)變量對(duì)象：compare()的活動(dòng)對(duì)象(activation object of compare())與全局變量對(duì)象(global object)。

對(duì)于簡(jiǎn)單的作用域鏈，就是這樣了，但是有閉包的情況會(huì)有所不同。

閉包的作用域鏈

//step1: define createComparisonFunction
function createComparisonFunction(propertyName){
  return function(object1, object2){
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
}
//step2: call createComparisonFunction
var compare = createComparisonFunction("name");
//step3: call compare
var result = compare({name: "Nicholas"}, {name: "Gerg"});
//step4: dereference closure for recycle memory
compare = null;

我們分下列幾個(gè)步驟來(lái)圖解作用域鏈：

step1: 定義createComparisonFunction；

在創(chuàng)建createComparisonFunction函數(shù)之后，createComparisonFunction可以被調(diào)用了，因此一個(gè)createComparisonFunction的Function對(duì)象被保留下來(lái)；
此時(shí)內(nèi)存中保留對(duì)象：

1. Global Object

2. createComparisonFunction對(duì)象 & Scope Chain

step2: 執(zhí)行createComparisonFunction；

在執(zhí)行createComparisonFunction的過(guò)程中，首先會(huì)創(chuàng)建createComparisonFunction的運(yùn)行時(shí)上下文對(duì)象 + ScopeChain + 活動(dòng)對(duì)象，其次會(huì)創(chuàng)建一個(gè)閉包(匿名函數(shù))，
函數(shù)執(zhí)行時(shí)內(nèi)存中保留對(duì)象：

1. Global Object
2. createComparisonFunction的Function對(duì)象 + Scope Chain
3. createComparisonFunction的運(yùn)行時(shí)上下文對(duì)象 + Scope Chain
4. createComparisonFunction的活動(dòng)對(duì)象
5. Closure(anonymous)的Function對(duì)象 + Scope Chain

在執(zhí)行完createComparisonFunction之后，createComparisonFunction的運(yùn)行時(shí)上下文對(duì)象+ScopeChain會(huì)被銷(xiāo)毀，但是createComparisonFunction的活動(dòng)對(duì)象因?yàn)楸籆losure(anonymous)對(duì)象的ScopeChain所引用，因此不會(huì)被銷(xiāo)毀。

函數(shù)執(zhí)行完內(nèi)存中保留對(duì)象：

1. Global Object
2. createComparisonFunction的Function對(duì)象 + Scope Chain
3. Closure(anonymous)的Function對(duì)象 + Scope Chain
4. createComparisonFunction的活動(dòng)對(duì)象

對(duì)比step1， step2在執(zhí)行完之后，增加了兩個(gè)對(duì)象：

1. Closure(anonymous)的Function對(duì)象 + Scope Chain
2. createComparisonFunction的活動(dòng)對(duì)象

這個(gè)是因?yàn)閳?zhí)行createComparisonFunction所產(chǎn)生的閉包被compare所引用了，而這個(gè)閉包函數(shù)的Scope Chain又引用了createComparisonFunction的活動(dòng)對(duì)象，因此內(nèi)存增加了這兩個(gè)對(duì)象。

step3: 執(zhí)行compare；

在執(zhí)行在執(zhí)行閉包(compare)的時(shí)候，首先會(huì)創(chuàng)建閉包的運(yùn)行時(shí)上下文對(duì)象 + ScopeChain + 活動(dòng)對(duì)象，然后執(zhí)行閉包。

閉包執(zhí)行時(shí)內(nèi)存中保留對(duì)象：

1. Global Object
2. createComparisonFunction的Function對(duì)象 + Scope Chain
3. 閉包Closure(anonymous)的Function對(duì)象 + Scope Chain
4. createComparisonFunction的活動(dòng)對(duì)象
5. 閉包Closure(anonymous)的運(yùn)行時(shí)上下文 + Scope Chain
6. 閉包Closure(anonymous)的活動(dòng)對(duì)象

執(zhí)行完閉包Closure(anonymous)之后，閉包Closure(anonymous)的活動(dòng)對(duì)象會(huì)被銷(xiāo)毀，閉包Closure(anonymous)的運(yùn)行時(shí)上下文 + Scope Chain也會(huì)被銷(xiāo)毀。

閉包執(zhí)行完內(nèi)存中保留對(duì)象：

1. Global Object
2. createComparisonFunction的Function對(duì)象 + Scope Chain
3. 閉包Closure(anonymous)的Function對(duì)象 + Scope Chain
4. createComparisonFunction的活動(dòng)對(duì)象

對(duì)比step2，step3執(zhí)行完畢之后，內(nèi)存中保留的對(duì)象沒(méi)有增加，這就是正常執(zhí)行一個(gè)函數(shù)的情況。

在正常情況下，執(zhí)行完一個(gè)函數(shù)之后，內(nèi)存中保留的對(duì)象應(yīng)該與執(zhí)行前一樣的。

執(zhí)行閉包因?yàn)闆](méi)有引入新的引用，所以內(nèi)存中保留的對(duì)象保持了一致。

那么問(wèn)題來(lái)了，createComparisonFunction的活動(dòng)對(duì)象到底怎么才能被銷(xiāo)毀呢？

我們首先看createComparisonFunction的活動(dòng)對(duì)象存在的原因是閉包Closure(anonymous)的Function對(duì)象的Scope Chain引用了createComparisonFunction的活動(dòng)對(duì)象，其目的是因?yàn)殚]包中需要訪問(wèn)propertyName這個(gè)createComparisonFunction的活動(dòng)對(duì)象中的屬性。

如果閉包Closure(anonymous)的Function對(duì)象被銷(xiāo)毀之后，createComparisonFunction的活動(dòng)對(duì)象因?yàn)闆](méi)有被任何對(duì)象引用，也會(huì)被銷(xiāo)毀。

step4解除了compare對(duì)閉包的引用，就使得閉包沒(méi)有被任何對(duì)象引用，閉包銷(xiāo)毀，從而使得createComparisonFunction的活動(dòng)對(duì)象因?yàn)闆](méi)有被任何對(duì)象引用，也會(huì)被銷(xiāo)毀，這樣就回收了這些對(duì)象所占用的內(nèi)存。

使用閉包的問(wèn)題就是內(nèi)存消耗會(huì)比一般的函數(shù)大，因?yàn)橐４骖~外的活動(dòng)對(duì)象，所以在不需要使用閉包的時(shí)候，需要將閉包解引用，回收額外的活動(dòng)對(duì)象所占用的內(nèi)存。

執(zhí)行完step4之后內(nèi)存中保留的對(duì)象：

1. Global Object

2. createComparisonFunction的Function對(duì)象 + Scope Chain

對(duì)比step1，step4在執(zhí)行完畢之后，沒(méi)有額外的對(duì)象被保留在內(nèi)存中，引用閉包所產(chǎn)生的額外對(duì)象都得到了回收。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: