JavaScript 闭包应用-点击li输出索引号

  • A+
所属分类:Web前端
摘要

立即执行函数里面的变量i,需要等到点击事件完成后再销毁,占用内存。


代码实现:

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title> </head>  <body>     <ul class="nav">         <li>000000000</li>         <li>111111111</li>         <li>222222222</li>         <li>333333333</li>     </ul>     <script>         // 闭包应用-点击li输出当前li的索引号         // 利用闭包的方式得到当前li的索引号         var lis = document.querySelector('.nav').querySelectorAll('li');         for (var i = 0; i < lis.length; i++) {             // 利用for循环创建了4个立即执行函数             // 立即执行函数也成为小闭包,因为立即执行函数里面的任何一个函数都可以使用i这变量             (function(i) {                 lis[i].onclick = function() {                     console.log(i);                 }             })(i);         }     </script> </body>  </html> 

缺点:

立即执行函数里面的变量i,需要等到点击事件完成后再销毁,占用内存。