JS高级学习历程-5

【闭包】

定义：闭包就是一个函数

条件：一个函数去嵌套另外一个函数，里边的函数就是闭包

function  f1(){

       function f2(){

 

}

}

特点：闭包函数有权访问父级环境的变量信息。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>14-闭包</title>
 6      <script type="text/javascript">
 7        //简单闭包
 8        //以下f1函数，只要执行完毕，name和addr变量就被销毁了
 9        function f1(){
10            var name="tom";
11            var addr="beijing";
12            function f2(){
13                console.log(AO.name+"--"+AO.addr);
14            }
15            return f2;
16        }
17 
18        //ff是f2函数的引用，因此调用ff函数的效果与调用f2函数效果一致
19        var ff = f1();
20 
21        //name和addr由于f1函数执行完毕，会被销毁
22        //ff()函数执行后也可以访问到name和addr的信息
23        //原因：name和addr在
24 
25        //name和addr由于f1函数声明好之后，已经“固定”为f2执行环境内部AO的属性了
26        //和外部环境的变量没有直接交互关系。
27 
28        //name和addr由于f1函数执行完毕，本身的作用域链被销毁
29        //但是f2函数内部的AO并没有被销毁，还有ff来指引它
30 
31        ff(); //tom--beijing
32      </script>
33 </head>
34 <body>
35     
36 </body>
37 </html>
14-闭包

 

1 案例-闭包计数器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>15-闭包-计数器</title>
 6     <script type="text/javascript">
 7       //①传统计数器
 8       var num=0;
 9       function add_num(){
10           return ++num;
11       }
12       console.log(add_num()); //1
13       console.log(add_num()); //2
14       console.log(add_num()); //3
15       console.log(add_num()); //4
16       //函数销毁就不能调用
17       //当前计数器不好的地方是计数基数容易被污染，导致计数错误
18       num=100;
19       console.log(add_num()); //101
20 
21       //
22       
23     </script>
24 </head>
25 <body>
26     
27 </body>
28 </html>
15-闭包-计数器

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3     <head>
 4         <title>16-闭包-计数器</title>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <meta name="description" content="" />
 7         <meta name="keywords" content="" />
 8 
 9         <script type="text/javascript">
10         
11         //②闭包计数器
12 
13         function f1(){
14             var num =0;
15             function f2(){
16                 return ++num;
17             }
18             return f2;
19         }
20         var add_num = f1();
21 
22         console.log(add_num()); //1
23         console.log(add_num()); //2
24         //由于计数器基数是f1函数内部的局部变量
25         //这样在外部就由于作用域链的关系不可能修改f1内部的num变量信息
26         num = 200;
27         console.log(add_num()); //3
28 
29         </script>
30 
31         <style type="text/css">
32         </style>
33     </head>
34 
35 
36     <body>
37         
38     </body>
39 </html>
16-闭包-计数器

总结：

1.作用域链

在js里边有环境，每个函数都是一个环境，最外部是window环境

每个环境的内部都有AO的活动对象

AO对象把当前环境可以访问的变量信息保存为本身的属性

环境是否有权访问一个变量信息，直接通过AO就可以知道

 

作用：

①       内部环境可以访问外部环境的变量信息，反之不可以

②       变量访问顺序是“先声明、后使用”

①       变量的作用域是定义时候决定的，不是运行时

 

2.闭包

闭包就是一个函数

 

posted @ 2015-05-19 12:07  竹立荷塘  阅读(374)  评论(0)  编辑  收藏  举报