干货分享:让你分分钟学会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 匿名函数及其代码模式原理
Mar 19 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
vue-axios使用详解
May 10 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
概述jQuery中的ajax方法
2016/12/16 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
python自带的http模块详解
2016/11/06 Python
python实现俄罗斯方块
2018/06/26 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
《称象》教学反思
2014/04/25 职场文书
杨善洲观后感
2015/06/04 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python