js-闭包

Posted 2020-11-30 进军码农

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