干货分享:让你分分钟学会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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue select 获取value和lable操作
Aug 28 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中的字符串函数
2006/10/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
动手学习无线电
2021/03/10 无线电
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
微信小程序如何获取用户收货地址
2018/11/27 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python base64编码解码实例
2015/06/21 Python
python实现字符串和字典的转换
2018/09/29 Python
python3实现逐字输出的方法
2019/01/23 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
2014年度工作总结报告
2014/12/15 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android