JavaScript中的闭包(Closure)详细介绍


Posted in Javascript onDecember 30, 2014

闭包是JavaScript中一个重要的特性,其最大的作用在于保存函数运行过程中的信息。在JavaScript中,闭包的诸多特性源自函数调用过程中的作用域链上。

 

函数调用对象与变量的作用域链

 

对于JavaScript中的每一次函数调用,JavaScript都会创建一个局部对象以储存在该函数中定义的局部变量;如果在该函数内部还有一个嵌套定义的函数(nested function),那么JavaScript会在已经定义的局部对象之上再定义一个嵌套局部对象。对于一个函数,其内部有多少层的嵌套函数定义,也就有多少层的嵌套局部对象。该局部对象称为“函数调用对象”(ECMAScript 3中的“call object”,ECMAScript 5中改名为“declarative environment record”,但个人认为还是ECMAScript 3中的名称更容易理解一些)。以下面的函数调用为例:

function f(x){

  var a = 10;

  return a*x;

}

console.log(f(6));//60

在这个简单的例子中,当调用f()函数时,JavaScript会创建一个f()函数的调用对象(姑且称之为f_invokeObj),在f_invokeObj对象内部有两个属性:a和x;运行f()时,a值为10而x值为6,因此最后的返回结果为60。图示如下:

JavaScript中的闭包(Closure)详细介绍

当存在函数嵌套时,JavaScript将创建多个函数调用对象:

function f(x){

  var a = 10;

  return a*g(x);

  function g(b){

    return b*b;

  }

}

console.log(f(6));//360

在这个例子中,当调用f()函数时,JavaScript会创建一个f()函数的调用对象(f_invokeObj),其内部有两个属性a和x,a值为10而x值为6;运行f()时,JavaScript会对f()函数中的g()函数进行解析定义,并创建g()的调用对象(g_invokeObj),其内部有一个属性b,b值与传入参数x相同为6,因此最后的返回结果为360。图示如下:

JavaScript中的闭包(Closure)详细介绍

可以看到,函数调用对象形成了一条链。当内嵌函数g()运行,需要获取变量值的时候,会从最近的函数调用对象中开始进行搜索,如果无法搜索到,则沿函数调用对象链在更远的调用对象中进行搜寻,此即所谓的“变量的作用域链”。如果两个函数调用对象中出现相同的变量,则函数会取离自己最近的那个调用对象中的变量值:

function f(x){

  var a = 10;

  return a*g(x);

  function g(b){

    var a = 1;

    return b*b*a;

  }

}

console.log(f(6));//360, not 3600

在上面的例子中,g()函数的调用对象(g_invokeObj)和f()函数的调用对象(f_invokeObj)中均存在变量a且a的值不同,当运行g()函数时,在g()函数内部所使用的a值为1,而在g()函数外部所使用的a值则为10。图示此时的函数调用对象链如下:

JavaScript中的闭包(Closure)详细介绍

什么是闭包?

在JavaScript中所有的函数(function)都是对象,而定义函数时都会产生相应的函数调用对象链,一次函数定义对应一个函数调用对象链。只要函数对象存在,相应的函数调用对象就存在;一旦某函数不再被使用,相应的函数调用对象就会被垃圾回收掉;而这种函数对象和函数调用对象链之间的一一组合,就称之为“闭包”。在上面f()函数和g()函数的例子中,就存在两个闭包:f()函数对象和f_invokeObj对象组成了一个闭包,而g()函数对象和g_invokeObj-f_invokeObj对象链一起组成了第二个闭包。当g()函数执行完毕后,由于g()函数不再被使用,因此g()闭包被垃圾回收了;之后,当f()函数执行完毕后,由于同样的原因,f()闭包也被垃圾回收了。

从闭包的定义可以得出结论:所有的JavaScript函数在定义后都是闭包 ? 因为所有的函数都是对象,所有的函数在执行后也都有其对应的调用对象链。

不过,令闭包真正发挥作用的是嵌套函数的情况。由于内嵌函数是在外部函数运行的时候才开始定义的,因此内嵌函数的闭包中所保存的变量值(尤其是外部函数的局部变量值)是这次运行过程中的值。只要内嵌函数对象依然存在,那么其闭包就依然存在(闭包中的变量值不会发生任何改变),从而也就实现了保存函数运行过程的信息这个目的。考虑以下这个例子:

var a = "outside";

function f(){

  var a = "inside";

  function g(){return a;}

  return g;

}

var result = f();

console.log(result());//inside

在这个例子中,当运行f()函数时,g()函数被定义,同时创建了g()函数的闭包,g()闭包包含了g_invokeObj-f_invokeObj对象链,因此保存了f()函数执行过程中的变量a的值。当执行console.log()语句时,由于g函数对象仍然存在,因此g()闭包也依然存在;当运行这个仍然存在的g函数对象时,JavaScript会使用依然存在的g()闭包并从中获取变量a的值(“inside”)。

Javascript 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 #Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 #Javascript
jQuery实现ichat在线客服插件
Dec 29 #Javascript
jQuery中用dom操作替代正则表达式
Dec 29 #Javascript
jQuery中:animated选择器用法实例
Dec 29 #Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 #Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 #Javascript
You might like
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP中soap的用法实例
2014/10/24 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python实现微信小程序支付功能
2019/07/25 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python生成器常见问题及解决方案
2020/03/21 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
女大学生个人求职信
2013/12/09 职场文书
运动会表扬稿大全
2014/01/16 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
会计岗位描述
2014/02/22 职场文书
书香校园建设方案
2014/05/02 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
话题作文之呼唤
2019/12/18 职场文书
java代码实现空间切割
2022/01/18 Java/Android
一文简单了解MySQL前缀索引
2022/04/03 MySQL