【原】如何在jQuery中實現閉包

原生JS中，閉包雖好用，可是很難用好，在jQuery中同樣，都有一些點須要咱們注意。jQuery中使用閉包的常見狀況有如下幾種：

一、$(document).ready()的參數

　　咱們在寫jQuery時都會把一系列的函數放在$(document).ready()中，這其實就是一個閉包，這有效避免了命名衝突；

二、綁定事件　

1 $(document).ready(function() {
2     var num = 0;
3     $("button").click(function(event) {
4          event.preventDefault();
5          num++;
6          console.log(num);
7     });
8 });

咱們爲「button」綁定點擊事件，click裏的函數就是一個匿名函數，它訪問了外部變量，每次訪問同一個num實例，屢次點擊，num值累計加1。

三、循環綁定事件

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

咱們的原意是想生產五個按鈕，併爲每一個按鈕綁定一個點擊事件，可是上述方案顯然是不行的，click事件裏傳的是一個匿名函數，每次訪問的都是i最終的值5。應該這樣寫：

 1 $(document).ready(function() {
 2     for (var i = 0; i < 5; i++)  {
 3         (function(val) {
 4             $("<button>btn" + val + "</button>")
 5                 .click(function() {
 6                     console.log(val);
 7                 }).insertBefore("#result");
 8         })(i)   
 9     }
10 })

咱們建立一個當即調用函數表達式，每一次都將當前的i值傳入函數，這樣，內部函數就能拿到每次循環當下的i值，而非終值。也能夠用each這樣寫：

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

咱們都知道.on()方法還接收一個對象參數，當事件被觸發是，會有一個對象參數以event.data的形式傳給對象處理函數，所以，還能夠這麼寫：

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

以上就是jQuery中處理閉包的方式，另外還要注意命名空間，和JS中道理都是同樣的。