closure

javascript闭包的理解、运⽤和销毁

javascript闭包的理解和运⽤

什么是闭包？

1、闭包让你可以在⼀个内层函数中访问到其外层函数的作⽤域。引⽤于：

2、闭包是⼀种保护私有变量的机制，在函数执⾏时形成私有的作⽤域，保护⾥⾯的私有变量不受外界⼲扰。直观的说就是形成⼀个不

销毁的栈环境。引⽤于：

PS：看看就好，看不懂也没关系

闭包的理解

⽐较直⽩的来理解闭包概念：

形成闭包的条件：

内外2层函数

内部函数中使⽤了⽗函数的变量

内部的私有变量外界可以引⽤，但⽆法改变，且不轻易被销毁

下⾯来看代码：

//外层函数

constouterFn=()=>{

//私有变量，可以通过内层函数访问，但⽆法被外界⼲预

letcount=0;

//内层函数

constinnerFn=()=>{

('内部count',count++);//使⽤了⽗函数的变量

returncount;

}

returninnerFn;

}

constclosure=outerFn();//这就是⼀个闭包

('返回的count',closure());

('返回的count',closure());

//输出结果：

//内部count0

//返回的count1

//内部count1

//返回的count2

根据结果看出：

可通过closure()来获取count的值

执⾏多次closure()时，count的值并不会被重置为0，⽽是持续叠加，证明outerFn内的私有变量count并不会随着执⾏closure()后被销毁。

闭包的运⽤

根据私有变量保护机制、且不易销毁的特性，可运⽤于缓存机制

//

ataBox=()=>{

letcache={};//缓存数据

letcacheKeys=[];//数据映射的key值

constmaxCacheCount=20;//为了防⽌内存溢出，规定最⼤缓存数据数量

return{

/*

*缓存数据

*key{string}映射数据的值

*data{any}需要缓存的数据

*/

tCache:(key,data)=>{

//判断key值是否已存在

if(keyincache){

cache[key]=data;

}el{

(key);

//判断已缓存的数据数量是否⼤于规定最⼤数量

if(>maxCacheCount){

constdelKey=();//删除第⼀个key，保持先进先出

deletecache[delKey];//删除对应的缓存数据

}

cache[key]=data;

}

},

/*

*获取映射缓存数据

*key{string}根据key值，获取映射的数据

*@return缓存数据|null

*/

getCache:(key)=>{

if(keyincache){

returncache[key];

}

returnnull;

},

/*

*清除映射缓存数据

*key{string}根据key值，清除映射的数据

*@return被清除的数据

*/

clearCache:(clearKey)=>{

if(clearKeyincache){

constkeyIndex=dex(val=>val===clearKey);//获取key值的下标

(keyIndex,1);//清除数组中的clearKey

constclearData=cache[clearKey];//保留被清除的数据，⽤于return

deletecache[clearKey];//清除对应的缓存数据

returnclearData;

}

returnnull;

},

/*

*获取全部缓存数据

*/

getAllCache:()=>{

returncache;

},

/*

*清除全部缓存数据，并返回全部缓存数据

*/

clearAllCache:()=>{

constcaCheData=cache;

cache={};

cacheKeys=[];

returncaCheData;

}

};

}();//⽴即执⾏匿名函数

封装好后，⼀般使⽤⽅法：

//

//缓存登陆信息

constajaxUr=newPromi((resove)=>{

//模拟接⼝请求

tTimeout(()=>{

resove({name:'李⼦玅',url:'/li459559937?spm=1011.2124.3001.5343'});

},3000);

});

//初始化数据

((data)=>{

he('urInfo',data);//缓存⽤户数据

});

//

//获取缓存的⽤户信息

consturInfo=he('urInfo');

('urInfo',urInfo);

//输出结果：

//urInfo{name:'李⼦玅',url:'/li459559937?spm=1011.2124.3001.5343'}

//

//⽤户登出，清除⽤户信息

ache('urInfo');

其他例⼦我就不写了，基本都涵盖在上⾯的例⼦中了。⽤法和原理都是差不多的。

具体可参考：

闭包的销毁

constouterFn=()=>{

letcount=0;

constinnerFn=()=>{

('count',++count);

}

returninnerFn;

}

letclosure=outerFn();//创建第⼀个闭包

closure();

closure();

closure=outerFn();//销毁第⼀个闭包，创建第⼆个闭包

closure();

closure();

closure=null;//销毁闭包

//输出结果：

//count1

//count2

//count1

//count2

由上⾯的例⼦可以看出来，当第⼆次为closure赋值后，再次执⾏2次closure()时，count的结果并不会变成3，4，⽽是⼜变回

了1，2。

这表⽰着，当第⼆次赋值的时候，第⼀个闭包就会被垃圾回收销毁掉，⽽第三次赋值为null时，则是把第⼆次的闭包也销毁了。

简单的总结：

关于闭包的销毁

可在模块或应⽤结束后来进⾏空赋值处理，进⾏销毁，⽐如上⾯的：closure=null

等待页⾯被关闭，才会被销毁。

⾄于为什么会要这么处理才会被销毁呢？具体的话可以⽹上找⼀下javascript回收机制，有兴趣的童鞋可以去了解了解。

题外话：缓存机制

既然前⾯有例⼦写到了缓存机制，那么也简单的了解⼀下。

对于缓存机制来说，也可以使⽤localStorage来实现，但是各有有缺点吧。

localStorage的优缺点

优点：

数据存于浏览器缓存中，可以同域名下，跨tab界⾯数据交互

存储时间长，关闭浏览器也不会被清除掉

存储⼤⼩可达5M

缺点：

任何数据储存后，都会被转化成字符串

⼿动清除浏览器缓存后就会被销毁

适合缓存简单型数据，单、多页⾯应⽤均可以使⽤

闭包的缓存机制

优点：

可以储存javascript的任何形态数据，且不会被转化

⼿动浏览器清除缓存也不影响

缺点：

⽆法跨tab界⾯数据交互

存储时间短，关闭tab页后就会被销毁

存在javascript内存中，缓存过多数据可能会影响性能，严重的导致内存溢出

适合：适合缓存少量复杂型数据，单界⾯应⽤

关于localStorage的使⽤请参考：