【闭包案例】
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>
17-闭包-数组
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>
18-闭包-数组
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>
20-闭包-当前行高亮显
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>
19-闭包-当前行高亮显示
时间： 2024-07-31 04:24:33