谈谈JavaScript中的函数与闭包


Posted in Javascript onApril 14, 2013

闭包这东西,说难也难,说不难也不难,下面我就以自己的理解来说一下闭包

一、闭包的解释说明

对于函数式语言来说,函数可以保存内部的数据状态。对于像C#这种编译型命令式语言来说,由于代码总是在代码段中执行,而代码段是只读的,因此函数中的数据只能是静态数据。函数内部的局部变量存放在栈上,在函数执行结束以后,所占用的栈被释放,因此局部变量是不能保存的。

Javascript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在定义函数时确定的。因此Javascript中函数对象不仅保存代码逻辑,还必须引用当前的作用域链。Javascript中函数内部的局部变量可以被修改,而且当再次进入到函数内部的时候,上次被修改的状态仍然持续。这是因为因为局部变量并不保存在栈上,而是通过一个对象来保存。

决定使用哪个变量是由作用域链决定的,每次生成函数实例时,都会为之创建一个对象用来保存局部变量,并且把这个用于保存局部变量的对象加入作用域链中。不同函数对象可以通过作用域链关联起来。Javascript中所有函数都是闭包,我们不能避免“产生”闭包。

引用一张《Javascript高级程序设计》中的图来说明,虽然这张图并不完全说明所有情况。图中的activation object就是用于保存变量的对象。

谈谈JavaScript中的函数与闭包

 

简而言之,在Javascript中:

闭包:函数实例保存着在执行时所需要的变量的引用,而不会复制保存当时变量的值。(在Object C的实现中,我们可以选择保存当时的值或者是引用)

作用域链:解析变量时查找变量所在的方式,以var作为终止符号,如果链上一直没有var,则一直追溯到全局对象为止。

C#中的闭包特性是由编译器把局部变量转换成引用类型的对象成员实现的。

二、闭包的使用
 
下面通过一些具体例子来说明如何利用闭包这一特性:

1.闭包是在定义的时候产生的

function Foo(){ function A(){} function B(){} function C(){}}
我们每次执行Foo()的时候,都有有A,B,C这三个函数实例(闭包)产生,当Foo执行完毕,生成的实例没有其他引用,因此会被当成垃圾随之销毁(不一定是马上销毁)。
我们来证实一下作用域链是在函数定义时确定的,所以这里显示的应该是'local scope'

var scope = "global scope"; function checkscope() { var scope = "local scope"; function f() { return scope; } return f;}checkscope()()

同样道理:

(function(){ function A(){} function B(){} function C(){}}())
上面的表达式执行完后也会有A,B,C这三个函数实例(闭包)产生,因为这是一个立即执行的匿名函数,这三个闭包只能产生一次。生成的闭包没有其他引用,因此会被当成垃圾随之销毁(不一定是马上销毁)。

我们之所以这么写,目地有两个

1.避免污染全局对象

2.避免多次产生相同的函数实例

 

对比下面两个例子,闭包是如何保存作用域链的:

 function A(){} //比较省内存的写法,创建对象速度快,开销小 (function(prototype){ var name = "a"; function sayName () { alert(name); } function ChangeName() { name += "_changed" } prototype.sayName = sayName;//引用通过执行匿名函数产生的闭包,闭包只会产生一次 prototype.changeName = ChangeName; }(A.prototype)) var a1 = new A(); var a2 = new A();
 a1.sayName(); a1.changeName(); a2.sayName();

--------------------------------------------------------------------------------

 function B(){ //原型链比较短的做法,找到方法的速度快,但是比较耗内存,每次new 调用构造器都有2个函数实例和1个变量产生。 var name = "b"; function sayName () { alert(name); } function changeName() { name += "_changed"; } this.sayName = sayName;//引用闭包,每次调用函数B都会产生新的闭包 this.changeName = changeName; }//如果函数调用之前带有new关键字,则函数作为构造器使用。//本质上来说作为构造器和作为普通函数调用没区别。如果直接调用B(),那么this对象会绑定到全局对象,新生成的闭包会代替旧的闭包赋给全局对象的changeName和sayName属性上,因此旧的闭包会被当成垃圾回收。//如果作为构造器使用,new 关键字会生成一个新的对象(this指向这个新对象)并初始化这个新对象的sayName和changeName属性,因此每次生成的闭包都会因为有引用而保留下来。 var b1 = new B(); b1.sayName(); b1.changeName(); b1.sayName(); var b2 = new B(); b2.sayName(); b1.sayName();

三、泄漏问题:在编译语言中,函数体总在文件的代码段中,并在运行期被装入标志为可执行的内存区。事实上我们不认为函数自身会有生命周期。我们在大多数情况下会认为“引用类型的数据结构”具有生存周期和泄漏的问题,如指针、对象等。

JavaScript中内存的泄漏本质上就是定义函数时生成的保存局部变量的对象因为存在引用而不被当成垃圾被回收。

1.存在循环引用

2.有些对象总不能销毁,如IE6在DOM中的内存泄漏,或者在销毁时不能通知到Javascript引擎,因此也就有些Javascript闭包总不能被销毁。这些情况通常是发生在Javascript宿主对象和Javascript中原生对象沟通不畅导致。

Javascript 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
在新窗口打开超链接的方法小结
Apr 14 #Javascript
JS中setTimeout()的用法详解
Apr 14 #Javascript
js验证是否为数字的总结
Apr 14 #Javascript
JS 实现Json查询的方法实例
Apr 12 #Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 #Javascript
location对象的属性和方法应用(解析URL)
Apr 12 #Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 #Javascript
You might like
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP防注入安全代码
2008/04/09 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python爬虫的工作原理
2017/03/05 Python
python学生信息管理系统
2018/03/13 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
班长自荐书范文
2014/02/11 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
教师个人教学反思
2016/02/23 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs