JavaScript閉包與作用域鏈的示例分析

小編給大家分享一下JavaScript閉包與作用域鏈的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

閉包定義

閉包指的是有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式，就是在一個(gè)函數(shù)A內(nèi)部創(chuàng)建另一個(gè)函數(shù)B，那么函數(shù)B就是一個(gè)閉包，可以訪問函數(shù)A作用域中的所有變量。

JavaScript的閉包與作用域鏈密不可分，因此本文可以和JavaScript的作用域鏈相對(duì)照分析，一定可以對(duì)JavaScript的閉包和作用域鏈有更深的理解。

下面我們?nèi)匀灰詂reateComparisonFunction為例進(jìn)行閉包的分析。

//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 compareName = createComparisonFunction("name");
var compareAge = createComparisonFunction("age");
//step3: call compare
var object1 = {
  name : "Nicholas",
  age : 25
};
var object2 = {
  name : "Greg",
  age : 27
};
var result1 = compareName(object1, object2); // 1
var result2 = compareAge(object1, object2); // -1
//step4: dereference closure for recycle memory
compareName = null;
compareAge = null;

在這個(gè)例子中，匿名函數(shù)function(object1, object2)是一個(gè)閉包，能訪問createComparisonFunction作用域里的所有變量，自然也包含propertyName屬性, 因?yàn)閜ropertyName參數(shù)的不同，導(dǎo)致比較的屬性也有所不同，從而函數(shù)執(zhí)行結(jié)果也有不同。

閉包與變量

從JavaScript的作用域鏈中，我們了解到JavaScript是通過作用域鏈來確定函數(shù)執(zhí)行環(huán)境的作用域的，這種機(jī)制會(huì)引出一個(gè)值得注意的副作用，即閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值。閉包是通過引用外部函數(shù)的活動(dòng)對(duì)象來訪問該活動(dòng)對(duì)象中的所有變量，因此在外部函數(shù)執(zhí)行過程中，這些變量的值可能會(huì)變化，但是在外部函數(shù)執(zhí)行完畢之后，外部函數(shù)的活動(dòng)對(duì)象便不會(huì)再改變，因此在執(zhí)行閉包的時(shí)候，閉包通過作用域鏈訪問到外部函數(shù)的活動(dòng)對(duì)象中的所有變量都只可能是在外部函數(shù)執(zhí)行完畢之后，外部函數(shù)的活動(dòng)對(duì)象中最后所保存的值。我們通過一個(gè)例子來說明這種副作用。

function createFunctions(){
  var result = new Array();
  for (var i = 0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var functions = createFunctions();
for(var i = 0; i < functions.length; i++){
  console.log(functions[i]());
}

輸出的結(jié)果是

10 10 10 10 10 10 10 10 10 10

從表面上看，似乎每個(gè)函數(shù)都應(yīng)該返回自己的索引值，但實(shí)際上，每個(gè)函數(shù)都返回10。因?yàn)槊總€(gè)函數(shù)的作用域鏈中都保存著createFunctions函數(shù)的活動(dòng)對(duì)象，所以他們引用的都是這個(gè)createFunctions函數(shù)的活動(dòng)對(duì)象中的變量i，在createFunctions函數(shù)返回之后，變量i的值是10，此時(shí)每個(gè)函數(shù)都引用著保存變量i的同一個(gè)變量對(duì)象，所以每個(gè)函數(shù)內(nèi)部i的值都是10。

我們以調(diào)用functions[3]()為例，圖解一下：

Closure函數(shù)的Function對(duì)象的作用域鏈引用的createFunctions的活動(dòng)對(duì)象中保留的變量i的值為10。所以不管是functions[3]()還是functions[5]()，其運(yùn)行時(shí)上下文的作用域鏈引用的createFunctions的活動(dòng)對(duì)象都是同一個(gè)活動(dòng)對(duì)象，該活動(dòng)對(duì)象中保留的變量i的值是10。

如何避免這種局面？我們可以通過創(chuàng)建另一個(gè)匿名函數(shù)讓閉包的行為符合預(yù)期。

function createFunctions(){
  var result = new Array();
  for (var i = 0; i < 10; i++){
    result[i] = function(num){
      return function(){
        return num;
      }
    }(i);
  }
  return result;
}
var functions = createFunctions();
for(var i = 0; i < functions.length; i++){
  console.log(functions[i]());
}

輸出的結(jié)果是

0 1 2 3 4 5 6 7 8 9

這個(gè)代碼片段與前面的代碼的區(qū)別在于立即調(diào)用了一個(gè)匿名函數(shù)function(num),使得閉包function()引用的是function(num)的活動(dòng)對(duì)象，訪問的是該活動(dòng)對(duì)象中的變量num而不是createFunctions活動(dòng)對(duì)象中的變量i，而在立即調(diào)用function(num)的num是索引值0,1,2…9。

我們?nèi)耘f以調(diào)用functions[3]()為例，圖解一下：

在執(zhí)行createFunctions函數(shù)的時(shí)候，會(huì)依次調(diào)用function(0), function(1) … function(9), 生成function(0), function(1) … function(9)這10個(gè)function(num)的活動(dòng)對(duì)象，而result[0], result[1] … result[9]這10個(gè)匿名函數(shù)對(duì)象的作用域鏈分別引用這10個(gè)function(num)的活動(dòng)對(duì)象，而其中的變量num的值也對(duì)應(yīng)的為0, 1 … 9。

所以不管是functions[3]()還是functions[5]()，其運(yùn)行時(shí)上下文的作用域鏈都會(huì)引用在執(zhí)行createFunctions函數(shù)時(shí)候所執(zhí)行的function(3)或者function(5)這些function(num)函數(shù)的活動(dòng)對(duì)象，這些活動(dòng)對(duì)象都是不同的活動(dòng)對(duì)象，其中保留的num值分別為3, 5。

以上是“JavaScript閉包與作用域鏈的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！