首页 > 代码库 > 初探js闭包
初探js闭包
1.变量的作用域:全局变量、局部变量
- 函数内部可以直接读取局部变量
js代码
var n=2;
function fun(){
alert(n);
}
fun(); //2
- 函数外部不能读取函数内部局部变量
js代码
function fun(){
var n=2; //注意这里要使用var,否则声明的是全局变量
}
alert(n); //error
- 下面n声明为全局变量
js代码
function fun(){
n=2;}
alert(n); //2
2.如何从外部读取局部变量?
有时候需要得到函数内部的局部局部变量,正常情况下是办不到的,只有变通才有可能。在函数内部在定义一个函数
js代码
function fun(){
var n=2;
function f2(){
alert(n); //2
}
}
上面代码,f2函数包含在fun函数中,这时fun内部的局部变量对f2是可见的,而f2内部局部变量,对fun不可见,这就是javascript"链式作用域"结构
子对象会一级一级向上寻找所有父对象的变量,即父对象的所有变量对子对象都可见,反之则不成立
js代码
function fun(){
var n=2;
function f2(){
alert(n);
}
return f2;
}
var result=fun();
result(); //2
3.闭包概念
上面f2函数就是闭包
闭包简单理解就是:能够读取其他函数内部变量的函数,即将函数内部与函数外部连接起来的桥梁
4.闭包的用途
事实上,通过使用闭包,可以做很多事情。比如:模拟面向对象的代码风格;更优雅,更简洁地表达出代码;在某些方面提升代码的执行效率
注:根据上面知识可知,所有的变量如果不加关键字,则默认会添加到全局对象的属性上,临时变量加入全局变量有很多坏处,如:别的函数可能误用这些变量,造成全局对象过于庞大,影响访问速度(因为变量的取值需要从原型链上遍历)。
4.1匿名子执行函数
有些函数只需执行一次,其内部变量无序维护,比如UI的初始化,我们可以使用闭包
js代码
var datamodel={ table:[]; tree:[];}(function(dm){for(var i=0;i<dm.table.rows;i++){ var row=dm.table.rows[i]; for(var j=0;j<row.cells;i++){ drawCell(i,j); } } //build dm.tree})(datamodel);
创建一个匿名函数并立即执行它,由于外部无法引用它内部的变量,因此在执行完后会很快被释放,最主要的是这种机制不会污染全局变量
4.2 缓存
如果我们正在处理过程很耗时的函数对象,每次调用都会花费很长时间,那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找的值即可。
闭包正是可以做到这一点,因为它不会释放外部的引用,函数内部的值可以得到保留。减少全局变量,常驻内存,可以实现缓存
js代码
function f1(){ var n=99; nAdd=function(){ n+=1; } function f2(){ alert(n); } return f2; } var result=f1(); result();//99 nAdd(); result();//100
为什么f1中的局部变量n一直保存在内存中,没有在f1调用结束后自动清除?
f1是f2的父函数,f2被赋给全局变量,导致f2始终在内存中,而f2的存在依赖f1,因此f1也始终在内存中,不会再调用结束后,被垃圾回收机制回收
4.3 实现封装
4.3.1如下例子,在person之外的地方无法访问其内部的变量,通过提供闭包的形式来访问
js代码
var person=function(){ var name="jack"; return{ getName:function(){ return name; }, setName:function(newName){ name=newName; } } }(); alert(person.name); //直接访问结果为:undefined alert(person.getName()); //jack person.setName("lihua"); alert(person.getName()); //lihua
4.3.2
闭包另一个重要用途是实现面向对象中的对象,传统的语言都提供类的模板机制,这样不同的对象(类的实例)拥有独立的成员及状态,互不干涉。虽然javascript中没有类这样的机制,但通过使用闭包,可以模拟出这样的机制。
js代码
function person(){ var name="jack"; return{ getName:function(){ return name; }, setName:function(newName){ name=newName; } } }; var jone=person(); alert(jone.getName()); //jack jone.setName("lihua"); alert(jone.getName()); //lihua var miss=person(); alert(miss.getName()); miss.setName("wanghai"); alert(miss.getName());
以上代码中Jone和miss可以成为person这个类的实例,因为这两个实例对name这个成员的访问时独立的,互补影响。
5使用闭包应该注意问题
5.1内存泄露
闭包会使函数中的变量都保存在内存中,内存消耗大,故不能滥用闭包,否则造成网页性能问题(浏览器响应速度慢、降低用户体验甚至会造成浏览器无响应等现象),在IE中可能导致内存泄露
5.2上下文应用
jQuery代码
$(function(){
var con=$("div#panel");
this.id="content";
con.click(function(){
alert(this.id); //panel
});
});
this.id 显示的被赋值content,而在click回调中,形成的闭包引用到this.id,但这个alert会弹出"panel",原因:虽然闭包可以引用局部变量,但此处涉及到this,因为调用对象的存在,使得闭包被调用时(当这个panel的click事件发生时),此处的this引用的是con这个jQuery对象,而匿名函数this.id="content"是对匿名函数本身做的操作。
如果想在事件中处理函数中访问的这个值,则必须做些改变
$(function(){
var con=$("div#panel");
this.id="content";
var self=this;
con.click(function(){
alert(self.id); //content
});
});
初探js闭包