点击按钮后弹出相应的颜色值
一、总结
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>