干货分享:让你分分钟学会javascript闭包


Posted in Javascript onDecember 25, 2015

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

1、闭包--爱的初体验

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

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

这是史上最简单的闭包,不能再简单了,再简单就不是闭包了!

有了初步的认识后,我们简单分析一下它和普通函数有什么不同,这样我们才能从“茫茫人海”中一眼认出“她”。

上面代码翻译成自然语言如下:

  • (1)定义了一个普通函数A
  • (2)在A中定义了普通函数B
  • (3)在A中返回B(确切的讲,在A中返回B的引用)
  • (4)执行A(),把A的返回结果赋值给变量 c
  • (5)执行 c()

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

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

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

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

不要刻意去记住这个定义,我告诉你这个定义的目的是想让你理解上面的5步操作就是在阐述闭包的定义。

因此,当你执行了上述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、高端写法

上面的写法其实是最简单最原始的写法,而在实际应用中,没人这么玩,特别是在一些大型JS框架中更不会这么写。我之所以还要告诉你这种写法,是因为干扰因素越少越容易专注于一件事。下面我用常用的写法来写一个简单的demo组件:

(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(){})()  红色部分是一个表达式,而这个表达式本身是一个匿名函数,所以在这个表达式后面加()就表示执行这个匿名函数。

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

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回收,会一直保存到内存中,所以这种写法满足闭包的条件。

4、简单的总结语

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
javascript实现行拖动的方法
May 27 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
vue实现商城上货组件简易版
Nov 27 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 #Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 #Javascript
JavaScript中Window对象的属性及事件
Dec 25 #Javascript
JavaScript字符串删除重复字符的方法
Dec 25 #Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 #Javascript
jquery实现图片预加载
Dec 25 #Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 #Javascript
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript 基本概念
2015/01/20 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python进行数据提取的方法总结
2016/08/22 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
详解用python写一个抽奖程序
2019/05/10 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
班级出游活动计划书
2014/08/15 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书