~~~ /* var btnList = document.querySelectorAll('.btn'); for (var i = 0; i < btnList.length; i++) { btnList[i].onclick = function () { console.log(`當前點擊按鈕的索引：${i}`); }; } */ // 解決辦法一：閉包解決方案，利用閉包的“保存”機制 // 每一輪循環的時候，都創建一個閉包(不釋放的上下文)，閉包中存儲自己的私有變量i，并且值是每一輪循環的索引；當點擊按鈕，執行對應的函數，遇到一個變量i，不要再去全局找了，而是讓其去所屬的閉包中查找即可... // @1 /* var btnList = document.querySelectorAll('.btn'); for (var i = 0; i < btnList.length; i++) { // 循環五次，產生五個不釋放的閉包，每一個閉包中，都存在一個私有變量i，變量的值是對應的索引 0/1/2/3/4 (function (i) { btnList[i].onclick = function () { console.log(`當前點擊按鈕的索引：${i}`); }; })(i); } */ // @2 /* var btnList = document.querySelectorAll('.btn'); for (var i = 0; i < btnList.length; i++) { btnList[i].onclick = (function (i) { return function () { console.log(`當前點擊按鈕的索引：${i}`); }; })(i); } */ // @3 NodeList集合本身具備forEach方法，和數組中的類似，都是用來迭代集合中每一項的 /* var btnList = document.querySelectorAll('.btn'); btnList.forEach(function (item, index) { // 迭代集合中每一項，都把這個回調函數執行，產生一個閉包「因為上下文中創建的小函數，被外層的按鈕對象的onclick占用了；每個閉包中有一個私有變量index，存儲的是當前這一項的索引」 item.onclick = function () { console.log(`當前點擊按鈕的索引：${index}`); }; }); */ // @4 也是基于閉包的方案，只不過利用的是LET會產生塊級上下文 /* let btnList = document.querySelectorAll('.btn'); for (let i = 0; i < btnList.length; i++) { // 每一輪循環都產生一個私有的塊級上下文，里面的內容(函數)被外部占用，也會產生一個閉包；而且每個閉包中，都有一個私有變量i記錄索引 btnList[i].onclick = function () { console.log(`當前點擊按鈕的索引：${i}`); }; } */ // 閉包方案雖然可以解決，但是比較消耗內存 //====================== // 解決方案二：自定義屬性 /* let btnList = document.querySelectorAll('.btn'); let i = 0; for (; i < btnList.length; i++) { // 最開始每輪循環的時候，給每一個按鈕對象都設定一個自定義屬性myIndex，存儲它的索引 btnList[i].myIndex = i; btnList[i].onclick = function () { // 每一次點擊的時候，基于THIS(當前操作元素)獲取之前存放的自定義屬性值 console.log(`當前點擊按鈕的索引：${this.myIndex}`); }; } // 性能比閉包要好一些，但是也有一些性能消耗{元素對象 & 節點集合 & 綁定的方法 都是開辟的堆內存} */ //====================== // 解決方案三：終極方案 事件委托 // 點擊每一個按鈕，除了觸發按鈕的點擊事件行為，根據冒泡傳播機制，也會把body的點擊事件行為觸發 /* document.body.onclick = function (ev) { let target = ev.target; if (target.tagName === 'BUTTON' && target.className === "btn") { // 點擊的事件源是按鈕 let index = target.getAttribute('data-index'); console.log(`當前點擊按鈕的索引：${index}`); } }; */ //====================================== /* // 能否實現每間隔1秒輸出 0 1 2? for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, i * 1000); //等待時間 0ms(5~7ms) 1000ms 2000ms } // 現在效果是，每間隔1000ms都輸出的是3? 定時器執行，方法中的i不是私有的，向上級找就是全局的i「此時全局i已經是循環結束的3」 */ // @1 /* for (let i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, i * 1000); } */ // @2 /* let i = 0; for (; i < 3; i++) { (function (i) { setTimeout(function () { console.log(i); }, i * 1000); })(i); } */ // @3 /* const fn = i => { return function () { console.log(i); }; }; let i = 0; for (; i < 3; i++) { setTimeout(fn(i), i * 1000); } */ // @4 /* let i = 0; for (; i < 3; i++) { // 設置定時器： // 參數1：回調函數，到時間執行的方案 // 參數2：等待時間 // 參數3：給回調函數“預先傳遞”的實參值{底層本質也是閉包 柯理化函數思想} setTimeout(function (n) { console.log(n); }, i * 1000, i); } */ ~~~