JavaScript闭包与作用域链深度解析及变量捕获陷阱

本文通过具体实例详细解析JavaScript中的闭包机制及其与变量作用域链的关联，旨在为读者提供清晰的参考指南。

闭包的基本概念

闭包的基本概念

闭包是指那些能够访问其他函数作用域中变量的函数。通常情况下，当在一个函数A内部定义另一个函数B时，函数B便构成了一个闭包，它有权访问函数A作用域内的所有变量。

JavaScript中的闭包机制与变量作用域链紧密相连，建议结合作用域链的相关知识进行对照学习，这将有助于更深入地理解闭包的本质与工作原理。

接下来，我们将继续使用createComparisonFunction这一经典案例来深入分析闭包的具体表现。

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

在此示例中，匿名函数function(object1, object2)构成了一个闭包，它能够访问createComparisonFunction作用域内的所有变量，包括propertyName属性。由于传入的propertyName参数不同，比较的逻辑也会随之变化，从而导致函数执行结果的不同。

闭包与变量的交互

闭包与变量的交互

基于JavaScript的作用域链机制，函数执行环境的作用域是通过作用域链来确定的。这种机制会引发一个值得注意的副作用：闭包只能访问包含函数中变量的最后一个值。这是因为闭包通过引用外部函数的活动对象来访问其中的变量，而在外部函数执行期间，这些变量的值可能会发生变化。一旦外部函数执行完毕，其活动对象不再改变，闭包在后续执行时访问到的变量值，实际上是外部函数执行结束后活动对象中保存的最终值。以下示例将说明这一副作用。

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]());
}

代码执行后输出的结果为：

10 10 10 10 10 10 10 10 10 10

从表面现象看，似乎每个函数应该返回其对应的索引值，但实际输出均为10。这是因为每个函数的作用域链中都保存着createFunctions函数的活动对象，它们引用的都是该活动对象中的变量i。当createFunctions函数返回后，变量i的值固定为10，此时所有函数都引用着保存变量i的同一个活动对象，因此每个函数内部读取到的i值均为10。

为了更直观地理解这一过程，我们以调用functions[3]()为例进行图解分析。

在Closure函数的Function对象的作用域链中，引用的createFunctions活动对象里保留的变量i的值为10。因此，无论是执行functions[3]()还是functions[5]()，其运行时上下文的作用域链所引用的createFunctions活动对象都是同一个，该活动对象中变量i的值始终为10。

如何避免这种由共享活动对象导致的意外局面？我们可以通过创建另一个匿名函数来调整闭包的行为，使其符合预期。

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]());
}

修正后代码的输出结果为：

0 1 2 3 4 5 6 7 8 9

此代码片段与前例差异在于立即调用匿名函数function(num)，使闭包function()引用function(num)的活动对象，访问该活动对象中的变量num而非createFunctions活动对象中的变量i，且立即调用function(num)的num为索引值0,1,2…9。

我们同样以调用functions[3]()为例，对修正后的代码进行图解说明。

在执行createFunctions函数时，会依次调用function(0), function(1) … function(9)，从而生成function(0), function(1) … function(9)这10个function(num)的活动对象。而result[0], result[1] … result[9]这10个匿名函数对象的作用域链分别引用这10个不同的function(num)活动对象，其中的变量num值也分别对应为0, 1 … 9。

因此，无论是执行functions[3]()还是functions[5]()，其运行时上下文的作用域链都会引用在创建createFunctions函数时生成的特定function(num)活动对象（如function(3)或function(5)）。这些活动对象彼此独立，其中保留的num值分别为3, 5等对应索引的值。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述内容对大家理解JavaScript程序设计有所帮助。