1、概念
闭包函数:申明在一个函数中的函数,叫做闭包函数。
闭包:外部函数总是能够拜访其所在的内部函数中申明的参数和变量,即便在其内部函数被返回(寿命终结)了之后。
2、特点
- 让内部拜访函数外部变量成为可能;
- 局部变量会常驻在内存中;
- 能够防止应用全局变量,避免全局变量净化;
- 会造成内存透露(有一块内存空间被长期占用,而不被开释)
3、闭包的创立
闭包就是能够创立一个独立的环境,每个闭包外面的环境都是独立的,互不烦扰。闭包会产生内存透露,每次内部函数执行的时候,内部函数的援用地址不同,都会创立一个新的地址。但但凡以后流动对象中有被外部子集援用的数据,那么这个时候,这个数据不删除,保留一根指针给外部流动对象。
闭包内存透露为:key = value,key被删除了value常驻内存中;局部变量闭包升级版(两头援用的变量)===> 自在变量;
可能了解起来比拟麻烦,请看上面的例子再回头看概念会了解的更透彻!
4、闭包的利用场景
!!!!!论断:闭包找到的是同一地址中父级函数中对应变量最终的值
这句论断是最终秘诀,每个例子请自行带入这个论断!!
~~~例例例1111
function funA(){ var a = 10; return function(){ alert(a); }}var b = funA()b(); // 10解析:函数funA的返回值是一个匿名函数,匿名函数中应用了其父级函数funA申明的局部变量a,这就是闭包。在函数内部,申明全局变量b,给b赋值为funA函数的执行后果,而funA函数的执行后果是匿名函数这个返回值,所以b就是function(){alert(a)},而后执行b,即alert(a),a为10
~~~例例例2222
function outerFn(){ var i = 0; function innerFn(){ i++; console.log(i); } return innerFn;}var inner = outerFn(); //每次内部函数执行的时候,都会开拓一块内存空间,内部函数的地址不同,都会从新创立一个新的地址inner();inner();inner();var inner2 = outerFn();inner2();inner2();inner2(); //1 2 3 1 2 3解析:每次内部函数执行的时候,都会开拓一块内存空间,内部函数的地址不同,都会从新创立一个新的地址!!!!inner赋值为outerFn函数调用的返回值innerFn,inner()第一次执行i++后为1,因为局部变量i会常驻在内存中,所以再次调用inner()后为2,以此类推输入1 2 3,but第二次从新赋值inner2,再次执行了外部函数,所以会开拓一块内存空间,因为内部函数的地址指向不同,就从新创立了一个新地址,i重头开始,同inner(),再次输入1 2 3
~~~例例例3333
var i = 0;function outerFn(){ function innnerFn(){ i++; console.log(i); } return innnerFn;}var inner1 = outerFn();var inner2 = outerFn();inner1();inner2();inner1();inner2(); //1 2 3 4解析:首先全副变量1,inner1和inner2为内部函数outerFn的不同地址,返回值都是innnerFn,第一次执行inner1(),即全局变量i为1,第一次执行inner2(),尽管是不同地址开拓不同内存,然而因为是全局变量不会再次执行扭转i的值,所以始终累加
~~~例例例4444
function fn(){ var a = 3; return function(){ return ++a; }}alert(fn()()); //4alert(fn()()); //4解析:a++ 先赋值,自身再++,例a=1,b=a++,则a为2,b为1++a 先自身++,再赋值,例a=1,b=++a,则a为2,b为2第一次fn()执行后的返回值为function(){return ++a},再次执行后果为++a,即4第二次从新执行内部函数fn,则从新开拓空间从头开始,后果一样
~~~例例例55555
function outerFn(){ var i = 0; function innnerFn(){ i++; console.log(i); } return innnerFn;}var inner1 = outerFn();var inner2 = outerFn();inner1();inner2();inner1();inner2(); //1 1 2 2解析:每次内部函数执行的时候,都会开拓一块内存空间,内部函数的地址不同,都会从新创立一个新的地址
~~~例例例6666
(function() { var m = 0; function getM() { return m; } function seta(val) { m = val; } window.g = getM; window.f = seta; })(); f(100);console.info(g()); //100 闭包找到的是同一地址中父级函数中对应变量最终的值
~~~例例例7777
function a() { var i = 0; function b() { alert(++i); } return b; } var c = a(); c(); //1 c(); //2
~~~例例例8888
function f() { var count = 0; return function() { count++; console.info(count); } } var t1 = f();t1(); //1 t1(); //2 t1(); //3
~~~例例例9999
var add = function(x) { var sum = x; var tmp = function(x) { sum = sum + x; return tmp; } tmp.toString = function() { return sum; } return tmp; } alert(add(1)(2)(3)); //6解析:add(1)执行后sum=1,返回值是tmp函数 add(1)(2)相当于调用tmp函数,sum = 1+2=3 ,返回值还是tmp函数 add(1)(2)(3)再次调用tmp函数,sum = 3+3=6,返回值还是tmp函数 因为alert进去的函数是字符串类型,所以把tmp.toString赋值为一个匿名函数, 返回值是sum,即6
~~~例例例10 10 10
var lis = document.getElementsByTagName("li");for(var i=0;i<lis.length;i++){ (function(i){ lis[i].onclick = function(){ console.log(i); }; })(i); //0 1 2 3 4 事件处理函数中闭包的写法}解析:闭包,会把局部变量临时存储在内存中
~~~~例例例11 11 11 11
function m1(){ var x = 1; return function(){ console.log(++x); }} m1()(); //2 都是2是因为闭包中,每次内部函数从新执行就从新开拓空间m1()(); //2m1()(); //2 var m2 = m1();m2(); //2 内部能拜访函数外部的变量,是闭包,且变量会暂存m2(); //3m2(); //4
~~~例例例12 12 12
var fn=(function(){ var i=10; function fn(){ console.log(++i); } return fn;})() fn(); //11fn(); //12
~~~例例例13 13 13
function love1(){ var num = 223; var me1 = function() { console.log(num); } num++; return me1;}var loveme1 = love1();loveme1(); //输入224
~~~例例例14 14 14
function fun(n,o) { console.log(o); return { fun:function(m) { return fun(m,n);// } };}var a = fun(0); //打印:undefined,返回值:a={fun:function(m){return fun(m,0)}}a.fun(1); //fun(1,0) ===>打印:0,返回值:{fun:function(m){return fun(m,1)}}a.fun(2); //fun(2,0) ===>打印:0,返回值:{fun:function(m){return fun(m,2)}}a.fun(3); //fun(3,0) ===>打印:0,返回值:{fun:function(m){return fun(m,3)}}var b = fun(0).fun(1).fun(2).fun(3); //undefined 0 1 2//fun(0).fun(1) ==> 打印undefined 0 返回值:{fun:function(m){return fun(m,1)}}//fun(0).fun(1).fun(2) ==> 打印 1 返回值:{fun:function(m){return fun(m,2)}}//fun(0).fun(1).fun(2).fun(3) ==>打印 2 返回值:{fun:function(m){return fun(m,3)}}var c = fun(0).fun(1); //打印undefined 0 返回值c={fun:function(m){return fun(m,1)}}c.fun(2); //fun(2,1) ===>打印 1c.fun(3); //fun(3,1) ===>打印 1答案:undefined 0 0 0 undefined 0 1 2 undefined 0 1 1解析:函数fun会返回一个对象,键值是fun函数,此fun非彼fun!!!!对象中的fun又返回函数fun(此处返回的指的是内部函数fun)
~~~例例例15 15 15
function fn(){ var arr = []; for(var i = 0;i < 5;i ++){ arr[i] = function(){ return i; } } return arr;}var list = fn();for(var i = 0,len = list.length;i < len ; i ++){ console.log(list[i]());} //5 5 5 5 5解析:list为fn的执行后果,fn的返回值是数组arr,即[fn(),fn(),fn(),fn(),fn()],此时父级fn函数中的i是最终值5,内部循环输入list[i]的执行后果,都是闭包中的外部函数arr[i]的返回值i,都是5
~~~例例例16 16 16
function fn(){ var arr = []; for(var i = 0;i < 5;i ++){ arr[i] = (function(i){ return function (){ return i; }; })(i); } return arr;}var list = fn();for(var i = 0,len = list.length;i < len ; i ++){ console.log(list[i]());} //0 1 2 3 4解析:立刻执行函数会存储每一次i的后果