【原】如何在jQuery中实现闭包

原生JS中，闭包虽好用，但是很难用好，在jQuery中一样，都有一些点需要我们注意。jQuery中使用闭包的常见情况有以下几种：

1、$(document).ready()的参数

　　我们在写jQuery时都会把一系列的函数放在$(document).ready()中，这其实就是一个闭包，这有效避免了命名冲突；

2、绑定事件　

$(document).ready(function() {
    var num = 0;
    $("button").click(function(event) {
         event.preventDefault();
         num++;
         console.log(num);
    });
});

我们为“button”绑定点击事件，click里的函数就是一个匿名函数，它访问了外部变量，每次访问同一个num实例，多次点击，num值累计加1。

3、循环绑定事件

$(document).ready(function() {
    for (var i = 0; i < 5; i ++) {
       $("<button>btn" + i + "</button>")
           .click(function() {
                console.log(i);
            }).insertBefore("#result");
    }
});            

我们的原意是想生产五个按钮，并为每个按钮绑定一个点击事件，但是上述方案显然是不行的，click事件里传的是一个匿名函数，每次访问的都是i最终的值5。应该这样写：

$(document).ready(function() {
    for (var i = 0; i < 5; i++)  {
        (function(val) {
            $("<button>btn" + val + "</button>")
                .click(function() {
                    console.log(val);
                }).insertBefore("#result");
        })(i)   
    }
})

我们创建一个立即调用函数表达式，每一次都将当前的i值传入函数，这样，内部函数就能拿到每次循环当下的i值，而非终值。也可以用each这样写：

$(document).ready(function() {
      $.each([0, 1, 2, 3, 4], function(index, value) {
           $("<button>btn" + value + "</button>")
                  .click(function() {
                       console.log(value);
                   }).insertBefore("#result");
           });
});

我们都知道.on()方法还接收一个对象参数，当事件被触发是，会有一个对象参数以event.data的形式传给对象处理函数，因此，还可以这么写：

$(document).ready(function() {
     for (var i = 0; i < 5; i ++) {
         $("<button>btn" + i + "</div>")
             .on("click", {value: i}, function(event) {
                 console.log(event.data.value);
               }).insertBefore("#result");
         }
});

以上就是jQuery中处理闭包的方式，另外还要注意命名空间，和JS中道理都是一样的。