0040.其它作業題的講解（自定義屬性強化） · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培訓 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> button { padding: 5px 10px; margin: 5px; } </style> </head> <body>  <button>按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button>  <script> var btnList = document.getElementsByTagName('button'); // 其它解決方案 for (var i = 0; i < btnList.length; i++) { (function (i) { btnList[i].onclick = function () { alert(`當前點擊這個按鈕的索引是：${i}`); }; })(i); } for (let i = 0; i < btnList.length; i++) { btnList[i].onclick = function () { alert(`當前點擊這個按鈕的索引是：${i}`); }; } [].forEach.call(btnList, (item, index) => { item.onclick = function () { alert(`當前點擊這個按鈕的索引是：${index}`); }; }); // 自定義屬性解決方案 for (var i = 0; i < btnList.length; i++) { var item = btnList[i]; // 給當前每一個BUTTON元素對象設置一個自定義屬性index，存儲它的索引 item.index = i; item.onclick = function () { // 點擊的時候基于自定義屬性獲取到元素的索引 alert(`當前點擊這個按鈕的索引是：${this.index}`); }; } /* * 這樣實現不了：最后不論點擊哪個按鈕，都輸出5 * 在循環給每一個按鈕的onclick事件綁定方法的時候，都是創建一個函數，然后賦值給onclick，但此時方法沒有執行，只是創建，所以函數所對應的堆內存中存儲的都是“代碼字符串 "alert(`當前點擊這個按鈕的索引是：${i}`);" ” * 循環繼續，循環結束后，全局的i=5 * 當我們點擊某個按鈕的時候，執行對應的函數，此時把之前存儲的代碼字符串變為代碼執行 alert(`當前點擊這個按鈕的索引是：${i}`)，需要用到變量i的值，但是此時i的值已經是循環結束后的5了 */ /* for (var i = 0; i < btnList.length; i++) { btnList[i].onclick = function () { alert(`當前點擊這個按鈕的索引是：${i}`); }; } */ </script> <script> var name = 10; var obj = { name: '珠峰培訓' }; console.log(obj.name); //=>“對象.屬性” 屬性不能為數字獲取OBJ中屬性名為NAME的屬性值 =>"珠峰培訓" console.log(obj['name']); //=>“對象[屬性]” 獲取OBJ中屬性名為NAME的屬性值=>"珠峰培訓" console.log(obj[name]); //=>此處的NAME不是值，它是一個變量，所以此處的意思是：把NAME變量存儲的值10作為屬性，從OBJ中進行獲取 =>obj[10] =>而OBJ對象中不存在屬性為10的屬性，所以屬性值是undefined </script> </body> </html> ~~~