接触过javascript的人应该听过闭包(closure),有一种观点认为是闭包赋予了javascript的强大能力,也赋予了它具备OOP的特征。既然javascript closure如此重要,那么问题来了,什么是closure呢?closure有什么作用?本文将结合我自己对closure的理解,用尽量通俗易懂的方式来进行阐述。

  先看看老外对closure怎么定义的?A closure is an inner function that has access to the outer (enclosing) function's variables—scope chain.从字面上来看,可以翻译为:闭包就是一个内部函数,它具备访问外部函数变量(这些变量位于作用域链中)的能力[注意变量不包含this和arguments]。但这个概念还是过于“专业化”, 不接地气,只从概念上来看,非常抽象。下面用一段JS来对应解释闭包的概念:

个人理解为:fInner函数定义在fOuter的内部,可以访问fOuter定义的变量,这个fInner函数就是closureclosure的 scope chain有3个一个是fInner函数定义的变量;一个是外部fOuter的变量;还有一个是全局变量(global variables)。closure的作用可以保留变量的值换句话说,函数fInner就是一个closure

  closure可以干2件事情:

  1)closure可以调用(闭包存储的外部变量是引用而不是值,这点非常重要)在当前函数以外的定义的变量(即使外部函数已经返回);

  2)closure可以修改外部定义的变量值

下面通过一段JS代码来阐述为什么闭包存储的外部变量是引用而不是值,这点非常重要

     function mixFunction(a)
{
var result=[],i,n;
n=a.length;
for(i=0;i<n;i++){
result[i]=function(){
//Closure对外部变量是引用
console.log("for i="+i);
return a[i];//a[i-1]
}
}
return result;
}
var mixcall=mixFunction([10,20,30]);
var f=mixcall[0];
console.log(f());//?应该输出什么值

f()会输出 10 么?答案是undefined!!!

为什么是这样的呢? 因为闭包对i是引用,在for循环时,会不断更新i的值。即在调用f()后,i已经被修改为3 (i===3),而a[3]为undefined!!

上述的代码始终会输出a[2]的值,也就是30。

那么问题来了?怎么解决该问题呢?这就要用到JS中的IIFE技术啦!IIFE技术来解决JS缺少块级作用域的解决方案。如下代码所示:

     function mixFunctionFix(a)
{
var result=[],i,n;
n=a.length;
for(i=0;i<n;i++){
//IIFE技术来解决JS缺少块级作用域的解决方案
(function(j){
result[i]=function(){
//Closure对外部变量是引用
console.log("for j="+j);
return a[j];
}
})(i)
}
return result;
}
var mixcall=mixFunctionFix([10,20,30]);
var f=mixcall[0];
console.log(f());//

前面提到JS闭包可以实现OOP的特征,下面给出JS如何定义一个“User类”(实际是一个JS函数)。此函数有私用变量和方法,同时也具有公开的方法。私有变量和方法不能函数外部调用:

     function User(){
//private properties
var _name = '';
var _age = 0; //private method
function privateMethod(){
return "private Method"
};
//public method
this.setName = function(name){
//can call
privateMethod();
_name = name;
return this;
}; this.setAge = function(age){
_age = age;
return this;
};
this.getAge = function(){
return _age;
};
this.getName = function(){
return _name;
};
}
var p=new User();
console.log(p.setName('jackwang').setAge(28));
console.log(p.getName());//jackwang
console.log(p.getAge());//
console.log(p._name);//undefined
console.log(p.privateMethod());//error

私有变量_name和_age以及私有方法privateMethod()都不能在函数外部调用。User设置name和age只能通过公开方法setName和setAge进行,获取只能通过getName和getAge进行访问。

有人会问,这个是闭包么?看下图:

如何理解javascript closure ?的更多相关文章

  1. 【转】深入理解JavaScript闭包闭包(closure) (closure)

    一.什么是闭包?"官方"的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.相信很少有人能直接看懂这句话,因为他描述 ...

  2. 理解Javascript 的闭包(closure)

    要理解闭包的概念先从变量的作用域说去 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之 ...

  3. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  4. 深入理解JavaScript闭包【译】

    在<高级程序设计>中,对于闭包一直没有很好的解释,在stackoverflow上翻出了一篇很老的<JavaScript closure for dummies>(2016)~ ...

  5. (转)深入理解JavaScript 模块模式

    深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www ...

  6. 深入理解javascript的闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  7. 深入理解javascript闭包(一)

    闭包(closure)是Javascript语言的一个难点.也是它的特色,非常多高级应用都要依靠闭包实现. 一.什么是闭包? 官方"的解释是:闭包是一个拥有很多变量和绑定了这些变量的环境的表 ...

  8. 深入理解javascript闭包(一)

    原文转自脚本之家(http://www.jb51.net/article/24101.htm) 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...

  9. 深入理解Javascript闭包概念

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部能够直接读取全局变量 ...

随机推荐

  1. SQL Server的Execute As与连接池结合使用的测试

    简介     在SQL Server中,Execute As关键字允许当前账户在特定上下文中以另一个用户或登录名的身份执行SQL语句,比如用户张三有权限访问订单表,用户李四并没有权限访问订单表,那么给 ...

  2. The Triumph Of Bio-logic

    理性技术的局限 机械逻辑 人造机械的构成逻辑,比如说钟表的制作原理.是一种可被人类掌握的,可推演的理论. 生物逻辑 一个有机系统的构成逻辑.比如说草原.细胞.大脑等这些系统的存在所依托的逻辑,我们成为 ...

  3. 使用bokeh-scala进行数据可视化

    目录 前言 bokeh简介及胡扯 bokeh-scala基本代码 我的封装 总结 一.前言        最近在使用spark集群以及geotrellis框架(相关文章见http://www.cnbl ...

  4. Android调用手机摄像头使用MediaRecorder录像并播放

    最近在项目开发中需要调用系统的摄像头录像并播放. 在开发中遇到了两个问题,记录下: (1)开发过程中出现摄像头占用,启动失败,报错.但是我已经在onDestory()中关闭了资源. 报错原因:打开程序 ...

  5. Intention.js – 动态重构 HTML 为响应式模式

    Intention.js 提供一个轻量级的和明确的方式,帮助你动态重组 HTML,成为响应式的方式.操作方法都放在了元素自己里面,所以灵活的布局看起来就似乎不会那么的抽象和凌乱. 您可以轻松地增加布局 ...

  6. android布局文件中android:icon="?attr/menuIconCamera"找不到对应图标路径

    如 <item android:id="@+id/camera" android:title="Camera" android:icon="?a ...

  7. C#根据身份证号码,计算生日、年龄、性别

    朋友谈及身份证相关的信息,才了解到原来省份证号码中包含了年龄和性别. 这样在数据库中,就不必单独留字段存放它们了(不过,要根据具体情况来,要是读取频率较高,还是单独列出为好),这样顺带解决了年龄变更的 ...

  8. SQL Server安全(7/11):使用跨数据库所有权链接(Cross-Database Ownership Chaining)的跨数据库安全

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  9. 用Latex写学术论文: IEEE Latex模板和文档设置(\documentclass)

    1.可以在博客园中使用latex代码输出公式,以后再以不用复制图片粘贴啦: http://www.cnblogs.com/cmt/p/3279312.html 例如以下代码两边加上 $ 符号后 x(k ...

  10. 用Eclipse新建一个web项目没有自动生成web.xml

    我们首先打开Eclipse,如下:   我们可以看到在"WEB-INF"文件夹下没有web.xml文件.   这是是什么原因呢,我们来看看,我们首先来新建一个web工程,如下:   ...