轻松学习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实现的分页函数
Dec 22 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 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
实用函数8
2007/11/08 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JSON遍历方式实例总结
2015/12/07 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python返回数组/List长度的实例
2018/06/23 Python
windows下python安装小白入门教程
2018/09/18 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
家长会演讲稿范文
2014/01/10 职场文书
大型会议接待方案
2014/03/01 职场文书
协议书模板
2014/04/23 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
婚礼父母致辞
2015/07/28 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript