JavaScript闭包原理与实战：从定义到内存泄漏防范

本文通过具体实例解析JavaScript中闭包（Closure）的实际用法，旨在提供清晰易懂的参考内容。

“闭包”这一术语常被认为过于学术化，本文结合相关书籍与网络资源进行简要探讨，如有理解偏差敬请指正。

什么是闭包

1、什么是闭包

官方定义指出：闭包是指包含众多变量以及绑定这些变量的环境（通常指函数）的表达式，使得这些变量成为该表达式的一部分。

若此定义难以理解，代码示例往往更具说服力。以下通过具体代码进行说明：


function funcTest()
{
 var tmpNum=100; //私有变量
 //在函数funcTest内定义另外的函数作为funcTest的方法函数
 function innerFuncTest(
 {
    alert(tmpNum); //引用外层函数funcTest的临时变量tmpNum
 }
 return innerFuncTest; //返回内部函数
}
//调用函数
var myFuncTest=funcTest(); 
myFuncTest();//弹出100

上述代码注释已清晰标注。我们可以这样理解闭包：在函数内部定义另一个函数作为目标对象的方法（如在funcTest内定义innerFuncTest），且该方法反过来引用外层函数中的临时变量。闭包本质上是一种间接保持变量值的机制，例如内部函数innerFuncTest引用外层函数funcTest的临时变量tmpNum。需注意，这些临时变量涵盖外部函数声明的所有局部变量、参数及其他内部函数。当此类内部函数在外部函数之外被调用时，即形成闭包（如示例中，调用myFuncTest实际执行的是innerFuncTest，此时funcTest的外部函数内创建了闭包）。

闭包应用实例：问题与解决方案

2、两个利用闭包的例子

下文将列举两个案例：一个展示闭包引发的问题，另一个则展示如何利用闭包巧妙绑定函数参数。

这两个例子涉及的HTML标记片段如下：


<a href="#" id="closureTest0">利用闭包的例子（1秒后会看到提示）</a><br />
<a href="#" id="closureTest1">由于闭包导致问题的例子1</a><br />
<a href="#" id="closureTest2">由于闭包导致问题的例子2</a><br />
<a href="#" id="closureTest3">由于闭包导致问题的例子3</a><br />

（1）、因闭包而导致问题

上述HTML片段包含4个<a>元素，现需为后三个链接指定事件处理程序，使其在点击时报告自身在页面中的顺序（例如点击第2个链接时提示“您单击的是第1个链接”）。若编写如下为后三个链接添加事件处理程序的函数：


function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick = function(){
      alert('您单击的是第' + i + '个链接');
    }
  }
}

随后，在页面加载完成后（避免报错）调用该函数：


window.onload = function(){
  badClosureExample();
}

观察运行结果，点击后3个链接时，警告框显示的信息是什么？——全部显示“您单击的是第4个链接”。这是否令人意外？原因何在？

分析：在badClosureExample()函数中，分配给element.onclick的事件处理程序（即onclick匿名函数）是在badClosureExample()运行结束后（用户点击链接时）才被调用。调用时需对变量i求值，解析器首先在事件处理程序内部查找，但未找到i的定义；随后在badClosureExample()函数中查找，此时i已存在，但其值为4（仅当i大于4时for循环才会停止）。因此获取该值——这正是闭包（匿名函数）使用其外部函数（badClosureExample）作用域中变量的结果。此外，这也是由于匿名函数本身无法直接传递参数（因而无法维护自身作用域）所导致。

如何解决此例中的问题？方法众多（读者可自行尝试），此处提供一种较为简单直接的代码方案：


function popNum(oNum){
  return function(){
          alert('您单击的是第'+oNum+'个链接');
  }
}
function badClosureExample(){
  for (var i = 1; i <4; i++) {
    var element = document.getElementById('closureTest' + i);
    element .onclick =new popNum(i);
    }
}

（2）、巧妙利用闭包绑定参数

仍使用上述HTML片段，若需在用户点击第一个链接时延时弹出警告框，如何实现？答案是使用setTimeout()函数，该函数会在指定毫秒数后调用一个函数，例如：

代码如下:

setTimeout(someFunc,1000);

问题在于，无法直接向someFunc函数传递参数。而利用闭包可轻松解决此问题：


function goodClosureExample(oMsg){
  return function(){
    alert(oMsg);
  };
}

函数goodClosureExample用于返回一个匿名函数（即闭包）。我们可以通过向其传递参数，使返回的匿名函数绑定该参数，例如：

代码如下:

var good = goodClosureExample('这个参数是通过闭包绑定的');

此时，可将已绑定参数的good函数传递给setTimeout()以实现延时警告：

代码如下:

setTimeout(good,1000) //此时good中已经绑定了参数

最后，测试通过的完整代码如下：


window.onload = function(){
  var element = document.getElementById('closureTest0');
  if (element) {
    var good = goodClosureExample('这个参数是由闭包绑定的');
    element.onclick = function(){
      setTimeout(good, 1000); //延迟1秒弹出提示
    }
  }
}

闭包对JavaScript垃圾回收的影响

3、javascript的垃圾回收原理

（1）、在javascript中，若一个对象不再被引用，则该对象将被垃圾回收器（GC）回收；

（2）、若两个对象互相引用，且不再被第三方引用，则这两个互相引用的对象也将被回收。

在JS中使用闭包，常会给垃圾回收器带来挑战。特别是在遇到对象间复杂的循环引用时，垃圾回收的判断逻辑变得极为复杂，稍有不慎便可能导致内存泄漏。因此，需谨慎使用闭包。微软方面似乎也不建议过度使用闭包。

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

JavaScript闭包(Closure)用法实例简析