闭包——面试必备的js知识，百发百中

Posted 2021-09-28 小鱼儿

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()());  //4
alert(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()();   //2
m1()();   //2
 
var m2 = m1();
m2();   //2   外部能访问函数内部的变量，是闭包，且变量会暂存
m2();   //3
m2();   //4

～～～例例例12 12 12

var  fn=(function(){
 var  i=10;
 function  fn(){
 console.log(++i);
 }
 return   fn;
})() 
fn();   //11
fn();   //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) ===>打印 1
c.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的结果