轻松学习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 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 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摘要生成函数(无乱码)
2012/02/04 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
化学教师自荐信范文
2013/12/28 职场文书
网络优化专员求职信
2014/05/04 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
购房个人委托书范本
2014/10/11 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
工作年限证明范本
2015/06/15 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
用Python实现Newton插值法
2021/04/17 Python