《开场白》
作为初级菜鸟的我,对与闭包知识,真的是一团迷雾,我这里就先把我现阶段对闭包的理解写出来,先记一下,随后对闭包理解深入了,再看看!
1.什么是闭包?
“菜鸟教程”上这样总结到:闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。看起来还是云里雾里的,接着看看下面的例子吧!
2.回顾一下局部变量和全局变量
首先必须理解Javascript特殊的变量作用域。闭包这里牵扯到变量,来吧
1. 全局变量:可以在任意位置访问的量就叫全局变量。在函数外通过var声明的变量。没有声明就使用的变量,不管在这句话在哪里,都是默认全局变量的赋值 。
2. 局部变量:函数中用var定义的变量,只能在函数中访问这个变量,函数外部访问不了。
//函数内部可以直接读取全局变量。
var age = 18;
function f1(){
alert(age);
}
f1(); // --------------------18
//在函数外部自然无法读取函数内的局部变量。
function f2(){
var num=99;
}
f2();
alert(num); // ---num is not defined//无法读取函数内的age
3.那么如何从外部读取局部变量?
/*
可以利用函数内再声明函数:内嵌函数
函数t2就被包括在函数t1内部,这时t1内部的所有局部变量,对t2都是可见的。但是反过来就不行,t2内部的局部变量,对t1就是不可见的。既然t2可以读取t1中的局部变量,那么只要把t2作为返回值,我们不就可以在t1外部读取它的内部变量了吗!
*/
function t1(){
var age = 18;
function t2(){
alert(age);
}
return t2;
}
var tmp = t1();
tmp();//----------------------------18
大部分的语言,t1被调用执行,则申请内存,并把其局部变量age, push入栈,t1函数执行完毕,内部的局部变量,随着函数的退出而销毁.因此age = 20 的局部变量已经消失了;
但是在js中,age = 20 这个变量,却被t2捕捉,即使t1执行完毕,通过t2仍然可以访问t2依然可以访问该变量。这也是实现上面的访问局部变量。
再来看一下,这个情形的过程,引入js闭包的知识点。
在js中,t1执行过程中又生成了t2,而作用域上来说,t2能访问到age = 20,于是age = 20 不会消失,而是与返回的t1函数形成了一个环境包,这个包是t2的(把其周围的变量环境形成了封闭的环境包 共同返回),即使t1执行完毕,通过t2仍然可以访问t1依然可以访问该变量,这就是闭包!!!
4.小桃花穿越故事
再来举个例子看懂闭包,通俗易懂的(燕十八老师讲过的一个例子)
故事梗概:2017年12月3日,双胞胎姐妹大桃花妹妹的小桃花因意外,穿越清朝 那么他的姐姐是谁?
function closure(){
var sister = '大桃花';
var me = function(){
alert(sister);
}
return me;
}
function place(){
var sister = '清朝大福晋';
var girl = closure();
girl();
}
place();//------------------------------大桃花
5.闭包计数器
闭包来维护一个别人污染不到的变量 做计数器
var fn = (function(){
var cnt = 0;
return function(){
return ++cnt;
}
})();
alert(fn());//------------------1
alert(fn());//------------------2
alert(fn());//------------------3
因为我们在上面的代码return回去了函数,然后因为这个自执行函数被fn引用所以里面的变量cnt并没有因为这个自执行函数执完而销毁,而是保存到了内存中,所以我们多次打印fn()就成了1、2、3
6.经典案例
闭包的使用场景
//没有使用闭包,实现不了点哪一个li,就显示数字几
window.onload = function(){
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
console.log(i); //不管我怎么点都是返回都一样
}
}
}
//用闭包来解决问题
window.onload = function(){
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
for(var i=1;i<=li.length;i++){
(function(i){
li[i].onclick = function(){
console.log(i); //点击第几个返回第几个
}
})(i)
}
}
闭包用途
本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
《结束语》
听说闭包用处很大(深入的理解JavaScript的闭包是迈向高级JS程序员的必经之路,理解了其解释和运行机制才能写出更为安全和优雅的代码),但是目前只掌握了这些,学习还是循序渐进的好,慢慢理解闭包吧!