Javascript 闭包详解及实例代码


Posted in Javascript onNovember 30, 2016

Javascript 闭包

闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟学会闭包!

1 闭包,一睹为快

在接触一个新技术的时候,我首先会做的一件事就是找它的 demo code。对于我们来说,看代码比自然语言更能理解一个事物的本质。其实,闭包无处不在,比如:jQuery、zepto的核心代码都包含在一个大的闭包中,所以下面我先写一个最简单最原始的闭包,以便让你在大脑里产生闭包的画面:

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var C = A();
C();//Hello Closure!

这是最简单的闭包。

有了初步认识后,我们简单分析一下它和普通函数有什么不同,上面代码翻译成自然语言如下:

(1)定义普通函数 A

(2)在 A 中定义普通函数 B

(3)在 A 中返回 B

(4)执行 A, 并把 A 的返回结果赋值给变量 C

(5)执行 C

把这5步操作总结成一句话就是:

函数A的内部函数B被函数A外的一个变量 c 引用。

把这句话再加工一下就变成了闭包的定义:

当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

因此,当你执行上述5步操作时,就已经定义了一个闭包!

这就是闭包。

2 闭包的用途

在了解闭包的作用之前,我们先了解一下 Javascript 中的GC机制:

在 Javascript 中,如果一个对象不再被引用,那么这个对象就会被 GC 回收,否则这个对象一直会保存在内存中。

在上述例子中,B 定义在 A 中,因此 B 依赖于 A ,而外部变量 C 又引用了 B , 所以A间接的被 C 引用。

也就是说,A 不会被 GC 回收,会一直保存在内存中。为了证明我们的推理,上面的例子稍作改进:

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var C = A();
C();// 1
C();// 2
C();// 3

count 是函数A 中的一个变量,它的值在函数B 中被改变,函数B 每执行一次,count 的值就在原来的基础上累加 1 。因此,函数A中的 count 变量会一直保存在内存中。

当我们需要在模块中定义一些变量,并希望这些变量一直保存在内存中但又不会“污染”全局的变量时,就可以用闭包来定义这个模块。

 3 高端写法

上面的写法其实是最原始的写法,而在实际应用中,会将闭包和匿名函数联系在一起使用。下面就是一个闭包常用的写法:

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

这个组件的作用是:初始化一个容器,然后可以给这个容器添加子容器,也可以移除一个容器。

功能很简单,但这里涉及到了另外一个概念:立即执行函数。 简单了解一下就行,需要重点理解的是这种写法是如何实现闭包功能的。

可以将上面的代码拆分成两部分:(function(){}) 和 () , 第1个() 是一个表达式,而这个表达式本身是一个匿名函数,所以在这个表达式后面加 () 就表示执行这个匿名函数。

因此这段代码执行执行过程可以分解如下:

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

在这段代码中似乎看到了闭包的影子,但 f 中没有任何返回值,似乎不具备闭包的条件,注意这句代码:

window.jView = obj;

obj 是在函数 f 中定义的一个对象,这个对象中定义了一系列方法, 执行window.jView = obj 就是在 window 全局对象定义了一个变量 jView,并将这个变量指向 obj 对象,即全局变量 jView 引用了 obj . 而 obj 对象中的函数又引用了函数 f 中的变量 viewport ,因此函数 f 中的 viewport 不会被 GC 回收,viewport 会一直保存到内存中,所以这种写法满足了闭包的条件。

 4 简单的总结语

这是对闭包最简单的理解,当然闭包还有其更深层次的理解,这个就涉及的多了,你需要了解JS的执行环境(execution context)、活动对象(activation object)以及作用域(scope)和作用域链(scope chain)的运行机制。但作为初学者,暂时不必了解这些,有了简单的理解之后,一定要在实际项目中用起来,等你用的多了,对于闭包,你自然会有更深层次的理解!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
理解javascript中的闭包
Jan 11 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
jQuery特殊符号转义的实现
Nov 30 #Javascript
Javascript 引擎工作机制详解
Nov 30 #Javascript
将JSON字符串转换成Map对象的方法
Nov 30 #Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 #Javascript
JS实现重新加载当前页面
Nov 29 #Javascript
jQuery弹出div层过2秒自动消失
Nov 29 #Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 #Javascript
You might like
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHP自定义错误用法示例
2016/09/28 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
审核会计岗位职责
2013/11/08 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
教师工作表现自我评价
2015/03/05 职场文书
2014年度个人总结范文
2015/03/09 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
解析目标检测之IoU
2021/06/26 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis