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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
浅谈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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
JS实现简单日历特效
2020/01/03 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python实现多线程抓取妹子图
2015/08/08 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
使用python3实现操作串口详解
2019/01/01 Python
django query模块
2019/04/20 Python
简单了解Python write writelines区别
2020/02/27 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
会计自我鉴定
2014/02/04 职场文书
二年级小学生评语
2014/04/21 职场文书
优秀语文教师事迹
2014/05/18 职场文书
三八妇女节慰问信
2015/02/14 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python