轻松学习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 相关文章推荐
jquery中 $.expr使用实例介绍
Jun 09 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 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执行.SQL文件
2013/07/05 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python 基于opencv去除图片阴影
2021/01/26 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
幼儿园运动会口号
2014/06/07 职场文书
大班亲子运动会方案
2014/06/10 职场文书
体育馆的标语
2014/06/24 职场文书
环保项目建议书
2014/08/26 职场文书
学习张林森心得体会
2014/09/10 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
辞职信如何写
2015/02/27 职场文书
送达通知书
2015/04/25 职场文书
法定代表人身份证明书
2015/06/18 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
Java 多线程并发FutureTask
2022/06/28 Java/Android