JavaScript中的闭包详解

闭包是JavaScript的重要特性,非常强大,可用于执行复杂的计算,可并不容易理解,尤其是对之前从事面向对象编程的人来说,对 JavaScript 认识和编程显得更难。特别是在看一些开源的JavaScript代码时感觉尤其如此,跟看天书没什么区别。

一般情况下,人们认识一个事物,会根据之前的经验,进行对比和总结,在脑中建立一个模型,从而理解掌握它,但是JavaScript与面向对象编程实在“没有可比性”,最明显的是某过于写法,总觉得“怪怪的”,更不用说,其一些高级特性。如果说“对象”在面向对象编程时的出现相当有规律,但是在JavaScript中则毫无规律,无处不在,甚至在你意想不到的地方。

首先看两段代码。

示例 1:

示例 2:

示例1 和示例2都是闭包,只是2 比1复杂,甚至还有更复杂的写法,比如返回多个闭包。

示例 1,脚本被载入内存后,并没有为函数 sayHelloWorld()计算变量sMessage的值。该函数捕获 sMessage的值只是为了以后的使用,也就是说,解释程序知道在调用该函数时要检查 sMessage 的值。sMessage将在函数调用sayHelloWorld()时(最后一行)被赋值,显示消息"hello world"。

示例 2,函数addNum()包括函数doAdd() (闭包)。内部函数是一个闭包,因为它将获取外部函数的参数 iNum1和iNum2以及全局变量 iBaseNum的值。 addNum()的最后一步调用了doAdd(),把两个参数和全局变量相加,并返回它们的和。

这里要掌握的重要概念是,doAdd()函数根本不接受参数,它使用的值是从执行环境中获取的。

闭包,根据 ECMAScript 描述,词法(lexically)表示包括不被计算的变量的函数,函数可以使用函数之外定义的变量,它意味着当前作用域总能够访问外部作用域中的变量。函数是JavaScript中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数。函数内部的函数访问其所在函数的变量(局部变量、形参),这些变量会受到内部函数的影响,当其外部函数外被调用时,就会形成闭包。内部的函数会在其外部函数返回后,被执行。

示例 3:

说明: foo 是bar的外部函数,ba 是foo的内部函数;a是foo的局部变量; bar 访问foo的局部变量 a; foo 返回bar。 bar在foo的外部被调用。 当执行 baz() 后,闭包使Javascript 垃圾回收机制不会回收foo所占的资源。因为,baz 实际指向foo的内部函数bar,bar依赖 foo的局部变量a。这样,在执行var baz=foo()后,baz实际指向了bar,而不是foo。bar访问了foo的局部变量a,当执行baz()后,a 为20。这就形成了一个闭包。

如果把foo看作是一个包,根据剪头指示,形成了一个闭包。结果是局部变量a的持久性(如示例 4 所示)。下面代码就不是闭包。无论执行多少次,都是显示 20。

参考自:http://www.toutiao.com/a6459693220359045645/?tt_from=weixin&utm_campaign=client_share&app=news_article&utm_source=weixin&iid=14394189501&utm_medium=toutiao_ios&wxshare_count=1

时间: 2024-11-02 11:05:20

JavaScript中的闭包详解的相关文章

【JavaScript中的this详解】

前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的规律 this指向的规律往往与函数调用的方式息息相关:this指向的情况,取决于函数调用的方法有哪些. 我们来看一下姜浩五大定律: 姜浩五大定律: ①通过函数名()直接调用:this指向window: ②通过对象.函数名()调用的:this指向这个对象: ③函数作为数组的一个元素,通过数组下标调用的

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. 前端UI资源I分享 <HTML> <HEAD><TITLE>Cancels L

JavaScript中的this详解

  前  言  this  JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪!!只关心包含this的函数,由谁调用!!] ①   通过()直接调用,this指向window  func(); ②   对象.函数调用,this指向当前对象. Obj.func()    div.onclick = function(){} ③   数组下标调用,this指向当前数组   [fu

JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 exec方法的返回值 exec方法返回的其实并不是匹配结果字符串,而是一个对象,简单地修改一下execReg函数,来做一个实验就可以印证这一点: function execReg(reg, str) { var result = reg.exec(str); alert(typeof result

javascript中addEventListener(attachEvent)详解

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture.例子如下:  <button type="button">点击我</button> <img src="11 (6).jpg" alt="" style="display:block"> <s

PHP中的闭包详解

PHP闭包(Closure)使用详解 作者: 字体:[增加 减小] 类型:转载 时间:2013-05-02我要评论 本篇文章介绍了,PHP闭包(Closure)的使用介绍,需要的朋友参考下 不知不觉发现PHP已经出到了5.5版本,而自己一直在用PHP5.2,让我看起来像深山出来的小伙子一样,又土又落后.在我习惯在javascript中使用闭包之后,忽然间对PHP的闭包打起了兴趣. 于是乎在网上下了个WAMP集成开发环境,是PHP5.3版本的(PHP5.3开始引入了闭包的特性),不得不说WAMP安

javascript系列2 -- 闭包详解

转发请标明来源:http://www.cnblogs.com/johnhou/p/javascript.html  请尊重笔者的劳动成果  --John Hou 今天我们从内存结构上来讲解下 javascript中的闭包概念. 闭包:是指有权访问另外一个函数作用域中的变量的函数.创建闭包的常见方式就是在一个函数内部创建另外一个函数. 在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,这样我们可以很大程度上减少全局作用域中的变量,净

轻松学习JavaScript二十九:JavaScript中的this详解

这几天在看很多的JS的代码,多次出现this关键字,有时候表示不理解,就仔细看了这一方面的知识. 在JavaScript语言中,this的定义是:this是包含它的函数作为方法被调用时所属的对象.说明:这句话有点咬 嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它:1包含它的函数.2作为方法被调用时.3所 属的对象.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那 个对象. this是Javascript语言的一个关键字,它代