JavaScript中闭包的写法和作用详解


Posted in Javascript onJune 29, 2016

1、什么是闭包

闭包是有权访问另一个函数作用域的变量的函数。
简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

2、变量的作用域

要理解闭包,首先要理解变量的作用域。
变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

其中内部函数中可以访问外部函数的变量,是因为内部函数的作用域链中包含了外部函数的作用域;

也可以理解为:内部函数的作用范围辐射到了外部函数的作用范围;

var n=999;
function f1(){
 alert(n);
}
f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

function f1(){
 var n=999;
}
alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

function f1(){
  n=999;
}
f1();
alert(n); // 999

3、闭包的几种写法和用法

3.1、给函数添加一些属性

function Circle(r) { 
this.r = r; 
} 
Circle.PI = 3.14159; 
Circle.prototype.area = function() { 
return Circle.PI * this.r * this.r; 
} 
var c = new Circle(1.0); 
alert(c.area()); //3.14159

3.2、是声明一个变量,将一个函数当作值赋给变量

var Circle = function() { 
var obj = new Object(); 
obj.PI = 3.14159; 

obj.area = function( r ) { 
return this.PI * r * r; 
} 
return obj; 
} 
var c = new Circle(); 
alert( c.area( 1.0 ) ); //3.14159

3.3、这种方法使用较多,也最为方便。var obj = {}就是声明一个空的对象

var Circle={ 
"PI":3.14159, 
"area":function(r){ 
return this.PI * r * r; 
} 
}; 
alert( Circle.area(1.0) );//3.14159

4、闭包的主要作用

闭包可以用在许多地方。它的最大用处有两个:一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

4.1、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

function f1(){
var n=999;

function f2(){

  alert(n); // 999

}
}

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1(){
var n=999;

function f2(){


alert(n); 

}

return f2;
}
var result=f1();
result(); // 999

4.2、如何将变量的值始终保存在内存当中?

function f1(){
var n=999;

nAdd=function(){n+=1}

function f2(){


alert(n);

}

return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

5、闭包与this对象

在闭包中使用this对象可能会导致一些问题。因为匿名函数的执行具有全局性,因此其this对象通常指向window.代码如下:

var name = "The window";
var object = {
name:"My object",
getNameFun:function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFun(){}); //"The window"(在非严格模式下)

把外部作用域中的this对象保存在一个闭包能够访问的变量里面,就可以让闭包访问该对象了。代码如下:

var name = "The window";
var object = {
name:"My object",
getNameFun:function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFun(){}); //“My object”

6、闭包与内存泄露

具体来说,如果闭包的作用域中保存着一个HTML元素,那么就意味着该元素无法被销毁。如下:

function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
}
}

以上代码创建了一个作为element元素事件处理程序的闭包,而这个闭包则又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用,因此会导致无法减少element的引用数。只要匿名函数存在,element的引用数至少也是1,因此他所占用的内存就不会被回收。

通过改写代码来解决内部不能回收问题:

function assignHandler(){
var element = document.getElementById("someElement");
var id = element.id;
element.onclick = function(){
alert(id);
}
element = null;
}

以上代码,实现闭包不直接引用element,包含函数的活动对象中也仍然会保存一个引用。因此,有必要把element的变量设置为null,这样就可以正常回收其占用的内存。

7、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

以上所述是小编给大家介绍的JavaScript中闭包的写法和作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 #Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 #Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 #Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 #Javascript
jqGrid用法汇总(全经典)
Jun 28 #Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 #Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
You might like
PHP开发Apache服务器配置
2015/07/15 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
使用Python的内建模块collections的教程
2015/04/28 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python变量类型知识点总结
2019/02/18 Python
python队列Queue的详解
2019/05/10 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python如何执行系统命令
2020/09/23 Python
Java基础知识面试要点
2016/07/29 面试题
文言文形式的学生求职信
2013/12/03 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
青年文明号口号
2014/06/17 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
离职证明格式样本
2015/06/12 职场文书
工作表现证明
2015/06/15 职场文书
农村婚庆主持词
2015/06/29 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
PHP遍历数组的6种方式总结
2021/11/17 PHP