谈一谈javascript闭包


Posted in Javascript onJanuary 28, 2016

下面就是我的学习笔记,对于Javascript初学者应该是很有用的。

一、变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种:全局变量和局部变量。
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

二、如何从外部读取局部变量?
出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。
那就是在函数的内部,再定义一个函数。

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

三、闭包的概念
上一节代码中的f2函数,就是闭包。
各种专业文献上的”闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。

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,可以在函数外部对函数内部的局部变量进行操作。

五、使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

六、思考题
如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。
代码片段一:

 var name = “The Window”; 
var object = { 


name : “My Object”, 


getNameFunc : function(){ 



return function(){ 




return this.name; 



}; 


} 

}; 

alert(object.getNameFunc()());

代码片段二:

 var name = “The Window”; 
var object = { 


name : “My Object”, 


getNameFunc : function(){ 



var that = this; 



return function(){ 




return that.name; 



}; 


} 

}; 

alert(object.getNameFunc()());

还有一个是this在javascript中是如何工作的?

var fullname = ‘John Doe'; 
var obj = { 
fullname: ‘Colin Ihrig', 
prop: { 
fullname: ‘Aurelio De Rosa', 
getFullname: function() { 
return this.fullname; 
} 
} 
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

回答
答案是Aurelio De Rosa和John Doe。原因是,在一个函数中,this的行为,取决于JavaScript函数的调用方式和定义方式,而不仅仅是看它如何被定义的。
在第一个 console.log()调用中,getFullname() 被调用作为obj.prop对象的函数。所以,上下文指的是后者,函数返回该对象的fullname。与此相反,当getFullname()被分配到test变量时,上下文指的是全局对象(window)。这是因为test是被隐式设置为全局对象的属性。出于这个原因,该函数返回window的fullname,即定义在第一行的那个值。

以上就是本文的全部内容,希望对大家再一次理解javascript闭包有所帮助。

Javascript 相关文章推荐
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
JsChart组件使用详解
Mar 04 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 #Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 #Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 #Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 #Javascript
js+canvas绘制五角星的方法
Jan 28 #Javascript
js+html5实现的自由落体运动效果代码
Jan 28 #Javascript
js判断上传文件后缀名是否合法
Jan 28 #Javascript
You might like
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
PHP 图片处理
2020/09/16 PHP
js post方式传递提交的实现代码
2010/05/31 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python的迭代器和生成器
2015/07/29 Python
Python中的变量和作用域详解
2016/07/13 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python构建基础的爬虫教学
2018/12/23 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python的in,is和id函数代码实例
2020/04/18 Python
Django权限控制的使用
2021/01/07 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
实体的生命周期
2013/08/31 面试题
大学生就业策划书范文
2014/04/04 职场文书
大学生实习证明范本
2014/09/19 职场文书
一般党员对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
前台接待员岗位职责
2015/04/15 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android