js-闭包

1.概念

  闭包函数:声明在一个函数中的函数,叫做闭包函数。

  闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其他外部函数被返回(函数结束)了之后。

2.特点

  让外部访问函数内部变量成为可能;

  局部变量会常驻在内存中;

  可以避免使用全局变量,防止全局变量污染;

  会造成内存泄漏(有一块内存空间被长期占用,而不释放)

3.闭包创建

  闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。闭包会发生内存泄漏,每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。但凡是当前活动的对象中有被内部子集引用的数据,那么这个时候,这个数据不删除,保留一根指针给内部活动对象。

  闭包内存泄漏为: key = value, key被删除了value常驻内存中;局部变量闭包升级版(中间引用的变量)=> 自由变量;

4.结论

  闭包找到的是同一地址中父级函数中对应变量最终的值;  

5.闭包应用场景

/* 例子1 */  

1 function funA() {
2   var a = 10;  //funA的活动对象之中;
3   return function(){  //匿名函数的活动对象;
4       alert(a);
5   } 
6 }
7 var b = funA()
8 b();  // 10;
View Code

 

/* 例子2 */

 1 function outerFn() {
 2   var i = 0;
 3   function innerFn() {
 4     i++;
 5     console.log(i)
 6   } 
 7   return innerFn;  
 8 }
 9 
10 var inner = outerFn();  // 每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
11 inner()
12 inner();
13 inner();
14 var inner2 = outerFn();
15 inner2();
16 inner2();
17 inner2(); // 1 2 3 1 2 3
View Code

 

/* 例子3 */

 1 var i = 0;
 2 function outerFn() {
 3   function innerFn() {
 4       i++;
 5       console.log(i);
 6   }
 7   return innerFn;
 8 }
 9 
10 var inner1 = outerFn();
11 var inner2 = outerFn();
12 inner1();
13 inner2();
14 inner1();
15 inner2();  // 1 2 3 4
View Code

 

/* 例子4 */

1 function fn() {
2     var a = 3;
3     return function() {
4       return ++a;
5     }  
6 }
7 
8 alert(fn()()); // 4
9 alert(fn()()); // 4
View Code

 

/* 例子5 */

 1 function outerFn() {
 2   var i = 0;
 3   function innerFn(){
 4     i++;
 5     console.log(i)
 6   }
 7   return innerFn;
 8 }
 9 
10 var inner1 = outerFn();
11 var inner2 = outerFn();
12 
13 inner1();
14 inner2();
15 inner1();
16 inner2();  // 1 1 2 2
View Code

 

/* 例子6 */

1 (function() {
2   var m = 0;
3   function getM() { return m; }
4   function seta(val) { m = val; }
5   window.g = getM;
6   window.f = seta;
7 })();
8 f(100);
9 console.info(g());  // 100 闭包找到的是同一地址中父级函数中应变量最终的值
View Code

 

/* 例子7 */

1 function a() {
2   var i = 0;
3   function b() { alert(++i); }
4   return b;
5 }
6 
7 var c = a();
8 c();  // 1
9 c();  // 2
View Code

 

/* 例子8 */

 1 function f() {
 2   var count = 0;
 3   return function() {
 4     count++;
 5     console.info(count);
 6   }
 7 }
 8 
 9 var t1 = f();
10 t1();   // 1
11 t1();   // 2
12 t1();   // 3
View Code

 

/* 例子9 */

 1 var add = function(x) {
 2   var sum = 1;
 3   var tmp = function(x) {
 4     sum = sum + x;
 5     return tmp;
 6   }
 7   tmp.toString = function() {
 8     return tmp;
 9   }
10   return tmp;
11 }
12 alert(add(1)(2)(3));   // 6
View Code

 

/* 例子10 */

1 var lis = document.getElementsByTagName('li');
2 for (var i =0; i<lis.length; i++){
3   (function(i) {
4     lis[i].onclick = function() {
5       console.log(i);
6     }
7   })(i)    // 事件处理函数中闭包的写法
8 }
View Code

 

/* 例子11 */

 1 function m1(){
 2   var x = 1;
 3   return function(){
 4     console.log(++x);
 5   }
 6 }
 7 
 8 m1()();  // 2
 9 m1()();  // 2
10 m1()();  // 2
11 
12 var m2 = m1();
13 m2();  // 2
14 m2();  // 3
15 m2();  // 4 
View Code

 

/* 例子12 */

1 var fn = (function(){
2     var i =10;
3     function fn(){
4       console.log(++i);
5     }
6     return fn;
7 })()
8 fn();  // 11
9 fn();  // 12
View Code

 

/* 例子13 */

 1 function love1() {
 2    var num = 223;
 3    var me1 = function() {
 4      console.log(num);
 5    }
 6    num++;
 7    return me1;
 8 }
 9 var loveme1 = love1();
10 loveme1();  // 输出224
View Code

 

/* 例子14 */

 1 function fun(n, o) {
 2     console.log(o);
 3     return {
 4        fun: function(m) {
 5            return fun(m, n);
 6        }
 7     };
 8 }
 9 
10 var a = fun(0);  // undefined
11 a.fun(1);   // 0
12 a.fun(2);  // 0
13 a.fun(3);  // 0
14 
15 var b = fun(0).fun(1).fun(2).fun(3);  // undefined  0  1  2
16 var c = fun(0).fun(1);
17 c.fun(2);
18 c.fun(3);  // undefined  0 1 1
View Code

 

/* 例子15 */

 1 function fn() {
 2     var arr = [];
 3     for(var i = 0; i < 5; i++) {
 4       arr[i] = function (){
 5         return i;
 6       }  
 7     }
 8     return arr;
 9 }
10 var list = fn();
11 for (var i = 0 ; len = list.length; i < len; i++) {
12   console.log(list[i]());
13 } //  5 5 5 5 5
View Code

 

/* 例子16 */

 1 function fn(){
 2   var arr = [];
 3   for(var i = 0; i < 5; i++) {
 4     arr[i] = (function(i) {
 5       return function () {
 6         return i;
 7       }
 8     })(i)
 9   }
10   return arr;
11 }
12 var list = fn();
13 for(var i = 0; i< list.length; i++) {
14     console.log(list[i]());
15 } // 0 1 2 3 4
View Code

 

posted @ 2020-05-21 22:22  进军码农  阅读(155)  评论(0编辑  收藏  举报