轻松学习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 学习笔记(十一)
Jan 19 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue发送ajax请求详解
Oct 09 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
javascript实现点击小图显示大图
Nov 29 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/04/28 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
Vue2.0生命周期的理解
2018/08/20 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单了解Django模板的使用
2017/12/20 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
详解Python中第三方库Faker
2020/09/25 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
创业计划书的内容步骤和要领
2014/01/04 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
中秋节祝酒词
2015/08/12 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers