轻松学习Javascript闭包函数


Posted in Javascript onDecember 15, 2015

闭包函数是什么?在开始学习的闭包的时候,大家很能都比较难理解.就从他的官方解释来说,都是比较概念化的.

不过我们也还是从闭包的含义出发。
闭包是指函数有自由独立的变量。换句话说,定义在闭包中的函数可以“记忆”它创建时候的环境。
官方解释说完后,我们先来看一个简单计数的例子.

var c = 0;
function count(){
c++;
}
count();// 1
count();// 2

这个例子是利用了全局变量来实现,但是这里有个问题是,c这个变量也容易被其他方式所调用,这时候就可能会改变 c 的存储值.造成这个count计数的失效.那怎么很好的处理这个问题呢!我们会想到的是使用局部变量的方式来处理.比如:

function count(){
 var c = 0;
 function add(){
  c++;
 }
 add();
}
count();// c = 1
count();// c = 1

因为这样创建之后,内部变量只存在于count函数创建执行的时候,执行完之后,整个函数就会被丢弃掉.就无法达到有记忆的能力.那要怎么来实现呢?那我们就用闭包来解决.我要重新提一次:闭包 = 函数 + 环境

function count(){
  var c = 0;
  function add(){
   c++;
  }
  return add;
}
var ct = count();
ct(); // c = 1
ct(); // c = 2

这个时候我们就可以通过这个闭包来完成计数的能力.ct就是一个闭包函数,内部的环境就是这个局部变量 c. 这里我们达到的就是内部数据,外部来操作.那闭包除了这个还有什么其他功能呢?

用闭包模拟私有方法
这有点像JAVA的私有方法或者私有变量,只能允许自己来操作!如果外部操作,就需要设定公开的方法来操作.

var person = (function(){
  var _name = "编程的人";
  var age = 20;
  return {
   add:function(){
     age++;
   },
   jian:function(){
     age--;
   },
   getAge:function() {
     return age;
   },
   getName:function(){
     return _name;
   },
   setName: function (name) {
     _name = name;        
   }
  }
})();
person.add();
var age = person.getAge();
console.log(age)
person.setName("编程的人公众号:bianchengderen")
console.log(person.getName())

这里应该很容易理解了吧! 有点面向对象编程的感觉。当然Javascript现在也有面向对象编程的特点.这点我们以后来说明.
目前为止,我们从计数到内部私有化的例子,来说明闭包,希望大家能简单明白其中的道理,当然闭包还有其他的功能利用是比较方便的。

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

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 #Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 #Javascript
js编写贪吃蛇的小游戏
Aug 24 #Javascript
javascript实现网页端解压并查看zip文件
Dec 15 #Javascript
探究JavaScript函数式编程的乐趣
Dec 14 #Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 #Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 #Javascript
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
JsDom 编程小结
2011/08/09 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python-opencv颜色提取分割方法
2018/12/08 Python
django的model操作汇整详解
2019/07/26 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
自我评价的范文
2014/02/02 职场文书
函授药学自我鉴定
2014/02/07 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
运动会加油口号
2014/06/07 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
python实现的web监控系统
2021/04/27 Python