JS高级学习历程-6
PHP菜鸟学习历程-6
【闭包案例】
1 闭包创建数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>17-闭包-数组</title> 6 <script type="text/javascript"> 7 var num=new Array(); 8 9 for(var i=0; i<=5; i++){ 10 num[i]=function(){ 11 console.log(i); 12 } 13 } 14 i=100; 15 //以上代码从环境上看连个环境，window和function内部环境 16 //function内部环境访问外部变量信息（实际6个元素访问了6次） 17 //window环境的i变量只有一个，并且for循环执行完毕值为6 18 //因此每个数字元素访问到的结果都是6 19 //console.log(i); 6 20 /* 21 num[0]=function(){console.log(0)} 22 num[1]=function(){console.log(1)} 23 num[2]=function(){console.log(2)} 24 ...... 25 num[5]=function(){console.log(5)} 26 */ 27 28 num[4](); //[6] 4 29 num[1](); //[6] 1 30 num[3](); //[6] 3 31 num[5](); 32 33 //num[6](); 34 //num[10](); 35 </script> 36 </head> 37 <body> 38 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>18-闭包-数组</title> 6 <script type="text/javascript"> 7 //闭包-制作数组 8 var num=new Array(); 9 //当for循环执行第一次的时候 10 for(var i=0; i<=5; i++){ 11 num[i]=f1(i); //把闭包传递给当前元素 12 } 13 /* 14 通过f1()函数调用，给每个num元素传递一个闭包，这样大家访问的信息都 15 是各自闭包的信息，每个闭包在内存中都单独存在，没有交集的地方 16 */ 17 function f1(n){ 18 //n=0传递给f2进行输出 19 function f2(){ 20 console.log(n); 21 } 22 return f2; 23 } 24 num[3](); //3 25 num[0](); //0 26 num[1](); //1 27 num[2](); //2 28 num[4](); //4 29 num[5](); //5 30 //num[6](); //is not function 31 /* 32 num[0]=function(){console.log(0)} 33 num[1]=function(){console.log(1)} 34 num[2]=function(){console.log(2)} 35 ...... 36 num[5]=function(){console.log(5)} 37 */ 38 39 </script> 40 </head> 41 <body> 42 43 </body> 44 </html>
2 闭包当前行高亮显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>20-闭包-当前行高亮显示</title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 //无序列表 高亮显示鼠标当前行 9 lis = document.getElementsByTagName('li'); 10 for(var i=0; i<=lis.length; i++){ 11 //lis[i] 代表当前行的li元素节点 12 lis[i].onmouseover = over(i); 13 14 lis[i].onmouseout = out(i); 15 } 16 } 17 /*利用闭包，给每个li元素节点都生成独立的闭包函数调用, 18 内部的n参数也是独立存在的*/ 19 function over(n){ 20 function or(){ 21 lis[n].style.backgroundColor = "gray"; 22 } 23 return or; 24 } 25 function out(m){ 26 function ot(){ 27 lis[m].style.backgroundColor = ""; 28 } 29 return ot; 30 } 31 </script> 32 </head> 33 <body> 34 <ul> 35 <li>关羽</li> 36 <li>张飞</li> 37 <li>黄忠</li> 38 <li>魏延</li> 39 </ul> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>19-闭包-当前行高亮显示</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //无序列表 高亮显示鼠标当前行 9 var lis = document.getElementsByTagName('li'); 10 11 //lis.length = 4; 12 13 for(var i=0; i<lis.length; i++){ 14 //lis[i] 代表当前的li元素节点 15 lis[i].onmouseover = function(){ 16 //当前内部环境访问外部环境的变量i 17 //实际外部环环境的变量i等于4 18 //console.log(i); 19 lis[i].style.backgroundColor = "gray"; 20 } 21 22 lis[i].onmouseout = function(){ 23 lis[i].style.backgroundColor = ""; 24 } 25 } 26 } 27 </script> 28 </head> 29 <body> 30 <ul> 31 <li>关羽</li> 32 <li>张飞</li> 33 <li>黄忠</li> 34 <li>魏延</li> 35 </ul> 36 </body> 37 </html>
