文盲的 JavaScript 经验谈之四：在 JS 中使用闭包

文盲的 JavaScript 经验谈之一：认识 JavaScript

文盲的 JavaScript 经验谈之二：了解一下浏览器对 JS 的处理

文盲的 JavaScript 经验谈之三：认识 arguments

文盲的 JavaScript 经验谈之四：在 JS 中使用闭包

---

闭包的定义很简单：

  闭包是可以用作函数参数和方法参数的代码块。
  闭包是具有闭合作用域的匿名函数。

引自《 跨越边界: 闭包 》

在这里，由于文盲的水平有限，就不对闭包的优点缺点什么的进行评论了，咱们只进行闭包如何使用来进行说明。

假设一个情况，我们要点击一个按钮，并对该按钮有一个事件，传统的写法是这样：

<input type="button" value="button 1" onclick="btnEvent(1);">
<input type="button" value="button 2" onclick="btnEvent(2);">
<input type="button" value="button 3" onclick="btnEvent(3);">
<input type="button" value="button 4" onclick="btnEvent(4);">
<input type="button" value="button 5" onclick="btnEvent(5);">
<script>
function btnEvent(n){
    alert('你现在点击的按钮是“button ”' + n);
}
</script>

每一个按钮的事件都是相同的，只有参数稍有不同，传统的方法在按钮比较少的情况下还好，如果按钮很多，不只是代码多的问题了，维护起来也是相当麻烦，甚至有的时候参数写错了都无法察觉。

那么，结合 DOM 和闭包，我们可以使用 JS 来定义这些按钮的动作：

<input type="button" value="button 1">
<input type="button" value="button 2">
<input type="button" value="button 3">
<input type="button" value="button 4">
<input type="button" value="button 5">
<script>
var el = document.getElementsByTagName('input');
for (var i = 0 ; i < el.length ; i ++){
     if (el[i].type == 'button'){
           el[i].onclick = function(){
               alert('你现在点击的按钮是“' + this.value + '”');
          }
     }
}
</script>

蓝色的部分就是一个闭包，在这个小程序中，对所有的 input 类型为按钮的控件都进行了一次 onclick 动作的定义，当按钮很多，或者参数不能确定的时候，使用闭包可以帮我们方便的定义期望动作

具体的应用实例可以参考文盲写的《 JS 版扫雷 》

除了上述情况之外，我们还有一些地方也可能会使用到闭包

比如函数参数的传递

假设我们有一个跨浏览器的 xml 对象 xmldom，我们使用这个对象进行一个 xml 文件的加载动作，在加载完成前不进行进一步的操作：

<script>
xmldom.load('test.xml');

function initXml(xml){
     if (xml.documentElement){
          goNextEvent();
     }else{
          setTimeout( function(){initXml(xml)},50);
     }
}

initXml(xmldom);
</script>

在这里使用闭包，主要就是为了传递 xml 这个对象，否则，setTimeout 本身是无法传递对象类型的参数的，而通过闭包，我们就可以传递出任意我们所期望的参数、格式等

具体的应用实例可以参考文盲写的《 XML 版无限级联动 》

使用闭包还有一个好处，就是如果某些参数会被浏览器自动引入的话，我们就可以直接在闭包中引用这个参数了

比如一个追踪鼠标位置的例子：

<input type="text" id="x" /> <input type="text" id="y" />
<script>
document.onmousemove = function(e){
    if (!e){
        var x = event.x;
        var y = event.y;
    }else{
        var x = e.pageX;
        var y = e.pageY;
    }
    document.getElementById('x').value = x;
    document.getElementById('y').value = y;
}
</script>

在这里针对鼠标移动事件就做了一个闭包，并根据浏览器传递的参数来确定最终显示的内容；

在 IE 中，鼠标事件是统一存放在 event 这个对象中的，而 FF 则是作为参数传递给相应的处理事件的；

所以，如果 e 非空则是 FF、NS 等浏览器，否则则是 IE 浏览器