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;
/* 例子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
/* 例子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
/* 例子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
/* 例子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
/* 例子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 闭包找到的是同一地址中父级函数中应变量最终的值
/* 例子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
/* 例子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
/* 例子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
/* 例子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 }
/* 例子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
/* 例子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
/* 例子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
/* 例子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
/* 例子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
/* 例子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