快捷導(dǎo)航

JavaScript作用域鏈實例詳解

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

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

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

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

簡單的作用域鏈

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

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

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

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

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

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

對于簡單的作用域鏈，就是這樣了，但是有閉包的情況會有所不同。

閉包的作用域鏈

//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;

我們分下列幾個步驟來圖解作用域鏈：

step1: 定義createComparisonFunction；

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

1. Global Object

2. createComparisonFunction對象 & Scope Chain

step2: 執(zhí)行createComparisonFunction；

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

1. Global Object
2. createComparisonFunction的Function對象 + Scope Chain
3. createComparisonFunction的運行時上下文對象 + Scope Chain
4. createComparisonFunction的活動對象
5. Closure(anonymous)的Function對象 + Scope Chain

在執(zhí)行完createComparisonFunction之后，createComparisonFunction的運行時上下文對象+ScopeChain會被銷毀，但是createComparisonFunction的活動對象因為被Closure(anonymous)對象的ScopeChain所引用，因此不會被銷毀。

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

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

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

1. Closure(anonymous)的Function對象 + Scope Chain
2. createComparisonFunction的活動對象

這個是因為執(zhí)行createComparisonFunction所產(chǎn)生的閉包被compare所引用了，而這個閉包函數(shù)的Scope Chain又引用了createComparisonFunction的活動對象，因此內(nèi)存增加了這兩個對象。

step3: 執(zhí)行compare；

在執(zhí)行在執(zhí)行閉包(compare)的時候，首先會創(chuàng)建閉包的運行時上下文對象 + ScopeChain + 活動對象，然后執(zhí)行閉包。

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

1. Global Object
2. createComparisonFunction的Function對象 + Scope Chain
3. 閉包Closure(anonymous)的Function對象 + Scope Chain
4. createComparisonFunction的活動對象
5. 閉包Closure(anonymous)的運行時上下文 + Scope Chain
6. 閉包Closure(anonymous)的活動對象

執(zhí)行完閉包Closure(anonymous)之后，閉包Closure(anonymous)的活動對象會被銷毀，閉包Closure(anonymous)的運行時上下文 + Scope Chain也會被銷毀。

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

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

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

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

執(zhí)行閉包因為沒有引入新的引用，所以內(nèi)存中保留的對象保持了一致。

那么問題來了，createComparisonFunction的活動對象到底怎么才能被銷毀呢？

我們首先看createComparisonFunction的活動對象存在的原因是閉包Closure(anonymous)的Function對象的Scope Chain引用了createComparisonFunction的活動對象，其目的是因為閉包中需要訪問propertyName這個createComparisonFunction的活動對象中的屬性。

如果閉包Closure(anonymous)的Function對象被銷毀之后，createComparisonFunction的活動對象因為沒有被任何對象引用，也會被銷毀。

step4解除了compare對閉包的引用，就使得閉包沒有被任何對象引用，閉包銷毀，從而使得createComparisonFunction的活動對象因為沒有被任何對象引用，也會被銷毀，這樣就回收了這些對象所占用的內(nèi)存。

使用閉包的問題就是內(nèi)存消耗會比一般的函數(shù)大，因為要保存額外的活動對象，所以在不需要使用閉包的時候，需要將閉包解引用，回收額外的活動對象所占用的內(nèi)存。

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

1. Global Object

2. createComparisonFunction的Function對象 + Scope Chain

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

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

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

您可能感興趣的文章: