谈谈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 相关文章推荐
Expandable "Detail" Table Rows
Aug 29 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
Vue formData实现图片上传
Aug 20 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
Nest.js散列与加密实例详解
Feb 24 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
在新窗口打开超链接的方法小结
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
php设计模式 Builder(建造者模式)
2011/06/26 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php验证session无效的解决方法
2014/11/04 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP内置加密函数详解
2016/11/20 PHP
php 数据结构之链表队列
2017/10/17 PHP
载入进度条 效果
2006/07/08 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
中专生自我鉴定范文
2013/12/19 职场文书
新闻发布会主持词
2014/03/28 职场文书
学校安全责任书范本
2014/07/23 职场文书
优秀班组申报材料
2014/12/25 职场文书