一、闭包!?

  闭包(closure)是Javascript语言的一个难点,对于初学者来说不容易理解,那我们先来看看闭包的含义。

  百度百科与“官方”解释:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

  维基百科:在编程语言中,闭包(也称为词法闭包或函数闭包)是用于在具有第一类函数的语言中实现词法范围名称绑定的技术。

  然而我们看到这些官方的解释并不能很清楚的了解闭包到底是什么鬼东西,只会一头问号,“你在说什么?”。

  其实闭包简单来讲就是能够读取函数内部定义的局部变量的函数,而在Javascript中只有函数内部的子函数才能读取局部变量,所以我们也可以把闭包理解成定义在函数内部的函数。

二、函数的变量

  想要理解闭包,我们就先要了解在函数中的变量,这些变量有自己的作用域。什么是作用域?呐,通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

  变量的作用域有两种,一个是全局,一个是局部,也就是我们所说的全局变量和局部变量。  

var a=50;
function fun1(){
alert(a);
}
fun();

  上面这段代码中,a在函数外面定义,所以在函数内部调用变量a自然可以读取它的值。这里的a我们就叫它全局变量。

function fun2(){
var a=50;
}
alert(a);

  而在这段代码中,我们把a定义在函数内部,那么在函数外部调用a的时候,它会报错,告诉你“a  is not defined”,我们找不到a啊?我们定义过a吗?当然定义过啊!只不过它是局部变量而已。

三、如何找到“藏”在函数里的变量

  在我们敲键盘码代码的时候,总会有一些原因,需要我们得到函数内部的局部变量,那么“藏”在函数里的局部变量我们就需要用一种方法把他提取出来。

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

function fun3(){
var a=50;
function fun4(){
return a;
}
return fun4();
}
//console.log(a); 报错
console.log(fun3());

  在上面这段代码里,我们在fun3里面定义了一个变量a,这样我们在函数fun3外调用a同样会报错找不到它,而对于函数fun3内部的函数fun4来说,a是可以调用的,因外a在函数fun4的外部,反过来fun4内如果定义了一个变量那么fun3是不可调用的。

  这里就又涉及到另一个概念,就是链式作用域,也就是我们说的作用域链。作用域链就是相同的变量名会产生作用域链,访问该变量名称的时候,会首先找本层作用域是否含有该变量,如果没有就去父层作用域去找,最终找到全局变量为止,如果全局变量也找不到该变量,那么就会报错。

  那么如果想在函数fun3外面调用变量a,就要在函数fun3内部再定义一个函数fun4,我们让它返回一下他可以调用的变量a,那么函数fun4的结果就是变量a,那么我们再返回函数fun4,那么我们执行函数fun3,得到的结果就是变量a的值。

  简单来讲,就是只要把fun4作为返回值,我们就可以在fun3外部读取它的内部变量了。

四、调用局部变量(使用闭包)要注意什么?

  1.闭包会使函数里面的变量被保存在内存中,对于内存的消耗非常大,所以不能滥用闭包,否则网页的性能会降低。

  2.不要随便改变父函数内部变量的值。

  最后总结一下,闭包就是能够读取其他函数内部变量的函数,能够让我们在父级函数外调用父级函数内的变量,有代码的情况下理解起来其实不难,重要的是在变化莫测的代码中,闭包具体的应用还是需要我们真正的理解它才可以熟练应用。

    

Javascript中的闭包 O__O "…的更多相关文章

  1. 让你分分钟学会Javascript中的闭包

    Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...

  2. 难道这就是JavaScript中的"闭包"

    其实对于JavaScript中的"闭包"还没真正理解,这次在实际Coding中似乎遇到了"闭包"的问题,仅此摘录,以待深究. 表现为jQuery的post方法回 ...

  3. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  4. javascript中的闭包解析

    学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...

  5. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  6. 【JS】JavaScript中的闭包

    在JavaScript中,闭包指的是有权访问另一个函数作用域中的变量的函数:创建闭包最常见的方式就是在一个函数内创建另一个函数.如下例子: function A(propertyName){ retu ...

  7. Javascript中的闭包(转载)

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  8. 狗日的Javascript中的闭包

    前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到 ...

  9. [译]Javascript中的闭包(closures)

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

随机推荐

  1. Navicat 的安装及破解

    本地环境: ubutun 14 1.安装. ①先老实选择官方试用版安装(不推荐在各个下载平台去下载) 中文版:http://www.navicat.com.cn/download/navicat-fo ...

  2. UI基础七:给普通其他界面的PRODUCT 添加标准的搜索帮助

    在使用的组件中添加组件对象 Outbound Plug中添加外向连接:OP_PRODUCT METHOD op_product. DATA: lv_title TYPE string, lr_cont ...

  3. Qt Widgets——菜单和菜单栏

    主窗口MainWindow需要菜单栏QMenuBar及菜单QMenu来组成自身,一般应用程序的所有功能都能在菜单中找到.接下来就来说说它们. QMenu 它添加了很多动作QAction,并用自身组成了 ...

  4. xinetd黑/白名单配置教程(以telnet为例)

    对于诸如telnet等托管于xinetd的服务,当请求到来时由于是通过xinetd进行通知,所以可以直接在xinetd上配置白名单允许和拒绝哪些ip连接服务. 本文主要参考xinetd.conf的ma ...

  5. jetty安装教程

    jetty是一个类似tomcat的应用服务器,:较tomcat少些JEE的扩展所以比tomcat还再轻量一些. 1.下载 各版本下载链接:http://central.maven.org/maven2 ...

  6. VMware如何进入安全模式

    VMware进入安全模式和物理机一样:使光标处于在虚拟机中激活状态,启动系统时不停按F8即可. 安全模式--只加载必要的驱动和进程:在cmd可以看到部份命令不能执行或命令功能不能完全实现. 网络安全模 ...

  7. JAVA的SPI简单应用

    最近在研究dubbo时,发现了JAVA的SPI特性.SPI的全名为Service Provider Interface,是JDK内置的一种服务发现机制. 具体实现: 1.定义一个接口 public i ...

  8. nyoj 0325 zb的生日(dp)

    nyoj 0325 zb的生日 zb的生日 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集 ...

  9. 用highchaarts做股票分时图

    1.首先向社区致敬给予灵感参考: https://bbs.hcharts.cn/thread-1985-1-1.html(给予参考的的例子js配置代码未进行压缩,可以清楚看到配置信息)   2.公司是 ...

  10. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...