巧用javascript對象屬性，向事件綁定的匿名函數內傳遞迴圈控制變數的值

遇到一個需要向匿名函數傳遞迴圈控制變數的問題，我受到園子里這篇文章的啟發【筆記】js獲取當前點擊元素的索引，解決了這個問題。現在把代碼貼出來，以防止自己忘記。

 1   if ($('#labModal').length > 0) {
 2     var screenWidth = window.screen.width;
 3     var equipList = document.getElementsByClassName('equip-item');
 4 
 5     for (i = 0; i < equipList.length; i += 1) {
 6       equipList[i].index = i;  // 給equipList[i]對象添加一個index屬性並將i賦值給它
 7       equipList[i].onclick = function() {
 8         $('.item').removeClass('active');
 9         $('.item').eq(this.index).addClass('active');  // 在匿名函數內部引用index屬性
10         if (screenWidth > 768) {
11           $('#labModal').modal();
12         }
13       }
14     }
15   }

註意代碼中的第6行：給equipList[i]對象添加了一個index屬性，並將變數i賦值給它，這樣equipList[0]的index值為0，equipList[1]的index值為1，equipList[2]的index值為2，......，equipList[i]的index值為i，這樣就實現了我要的效果。然後在equipList[i]對象onclick綁定的函數中就可以直接用這個值了：this.index。不然的話，還有什麼其他方法將變數i的值傳遞到這個匿名函數中來實現上面的效果呢？

好吧，其實問題並不在“將迴圈控制變數i的值傳遞到匿名函數”中來，上面代碼的關鍵在於，給每一個equipList數組中的元素，也就是equip-item對象節點添加了一個index屬性，並給這個屬性分別賦值（比如，從0到16），最終的目的其實是為了獲取$('.item')[i]這個元素，然後再對其進行操作。

javascript真是靈活，在javascript中一切皆對象，而對象就是屬性的集合。

上面的for語句其實有些問題，最好這麼寫：

1 for (var i = 0; i < equipList.length; i += 1) {
2    // other codes
3 }

而ES6語法中，則引入了const和let，可以將上面的var換為let。至於為什麼要加上var，還有const和let與var相比又有什麼區別，等到有時間再研究下。

參考：

1，【筆記】js獲取當前點擊元素的索引