点击按钮后弹出相应的颜色值

一、总结

1、都是立即执行的匿名函数：()()

 

二、点击按钮后弹出相应的颜色值

练习2：

  • 实例描述： 点击按钮后弹出相应的颜色值
  • 案例要点： 通过这个例子加深对循环语句中匿名函数的理解。

 

三、代码



1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>练习02</title>
 6     <style type="text/css">
 7         div{
 8             width: 150px;
 9             height: 150px;
10             font-size: 28px;
11             display: inline-block;
12         } 
13         #green{background:green;}
14         #blue{background:blue;}
15         #red{background:red;}
16         #orange{background:orange;}
17     </style>
18 </head>
19 <body onload="test4();"> 
20     <div id="green">green</div>
21     <div id="blue">blue</div>
22     <div id="red">red</div>
23     <div id="orange">orange</div>
24 </div> 
25 <script type="text/javascript"> 
26     function test1() {  //1、这样的方式得不到效果，匿名函数里面的循环变量都是在i循环完的4
27         var colorArr=['green','blue','red','orange']
28         var divArr= document.getElementsByTagName("div"); 
29             for( var i=0; i<4; i++ ) { 
30                 divArr[i].onclick = function() { 
31                 alert(colorArr[i-1]); 
32             } 
33         } 
34     } 
35 //加一层闭包，i 以函数参数形式传递给内层函数 
36     function test2() { 
37         var colorArr=['green','blue','red','orange']
38         var divArr= document.getElementsByTagName("div"); 
39             for( var i=0; i<4; i++ ) { 
40                 (function(i){divArr[i].onclick=function(){
41                         alert(colorArr[i]);
42                     }
43                 })(i) 
44 
45             } 
46         }  
47 //加一层闭包，i 以局部变量形式传递给内层函数 
48     function test3() { 
49         var colorArr=['green','blue','red','orange']
50         var divArr= document.getElementsByTagName("div"); 
51             for( var i=0; i<4; i++ ) { 
52                 (function(){
53                     var c=i;
54                     divArr[i].onclick=function(){
55                         alert(colorArr[c]); // 4、这个c可是会常驻内存的，因为这层匿名函数用了外层匿名函数的变量
56                     }
57                 })() 
58 
59             } 
60         }
61 //加一层闭包，返回一个函数作为响应事件
62      function test4() { 
63         var colorArr=['green','blue','red','orange']
64         var divArr= document.getElementsByTagName("div"); 
65             for( var i=0; i<4; i++ ) { 
66                     divArr[i].onclick=(function(c){
67                         return function(){
68                             alert(colorArr[c]); //5、这个c也是会常驻内存的，因为这层匿名函数用了上一层匿名函数的变量
69                         }
70                     })(i) 
71             } 
72         }
73 
74 </script> 
75     
76 </body>
77 </html>