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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
Django模板继承 extend标签实例代码详解
May 16 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
WINXP下apache+php4+mysql
2006/11/25 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
学习Vue组件实例
2018/04/28 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
python self,cls,decorator的理解
2009/07/13 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python实现简单登陆系统
2018/10/18 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python数组并集交集补集代码实例
2020/02/18 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
党课培训主持词
2014/04/01 职场文书
经营管理策划方案
2014/05/22 职场文书
敬老院标语
2014/06/27 职场文书
交通志愿者活动总结
2014/06/27 职场文书
音乐教师求职信
2014/06/28 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书