javascript中的立即执行函数

概要:立即执行函数的作用是建立一个作用域,防止变量污染。

立即执行函数的写法:

1 //第一种写法
2 (function(i) {
3             ...
4             } (i) )
5 
6 //第二种写法
7 (function(i) {
8             ...        
9             }) (i)

例子:

废话少说,先看一个例子:

HTML代码:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>123</title>
 6     <style>
 7         li{
 8             list-style: none;
 9         }
10         button{
11             width:20px;
12             height: 10px;
13                 
14         }
15     </style>
16 </head>
17 <body>
18     <ul>
19         <li><button></button></li>
20         <li><button></button></li>
21         <li><button></button></li>
22         <li><button></button></li>
23         <li><button></button></li>
24         <li><button></button></li>
25     </ul>
26     <script src="1-1.js"></script>
27 </body>
28 </html>

JS代码:

var liList = document.getElementsByTagName('li')
for(var i=0; i<6; i++){
    liList[i].onclick = function(){
      alert(i) // 6,6,6,6,6,6
    }
}

结果:

 

 

 分析:这种情况就是发生了变量污染,因为在onclick事件发生时for已经循环完了,所以i一直时6。

那应该怎么避免这种情况?当然是使用立即执行函数!

使用这个js代码:

1 var liList = document.getElementsByTagName('li')
2 for(var i=0; i<6; i++){
3   (function(j){
4     liList[j].onclick = function(){
5       alert(j) // 0、1、2、3、4、5
6     }
7   })(i)
8 }
9 //避免了变量污染问题,使用立即执行函数创建了6个作用域,i被自动复制作为变量传递到形参里;

 

posted @ 2020-09-01 17:53  冯荣新  阅读(329)  评论(0编辑  收藏  举报