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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
详解vue 命名视图
Aug 14 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 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伪静态的实现详细介绍
2013/04/28 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php时间计算相关问题小结
2016/05/09 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
node.js的事件机制
2017/02/08 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
python求列表交集的方法汇总
2014/11/10 Python
Python生成不重复随机值的方法
2015/05/11 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
一看就懂得Python的math模块
2018/10/21 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python调用C/C++的方法解析
2020/08/05 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
个人自我鉴定范文
2013/10/04 职场文书
社团活动总结书
2014/06/27 职场文书
联谊活动总结
2014/08/28 职场文书
大学生个人学习总结
2015/02/15 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书