轻松学习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 相关文章推荐
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
原生js实现表格循环滚动
Nov 24 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
python3.3实现乘法表示例
2014/02/07 Python
github配置使用指南
2014/11/18 Python
Python操作串口的方法
2015/06/17 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
个人实用简单的自我评价
2013/10/19 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
护士岗位职责
2014/02/16 职场文书
环境日宣传活动总结
2014/07/09 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
杭白菊导游词
2015/02/10 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
让子弹飞观后感
2015/06/11 职场文书
城南旧事读书笔记
2015/06/29 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript