轻松学习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 相关文章推荐
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
jquery 插件学习(三)
2012/08/06 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
Python编程求质数实例代码
2018/01/31 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python线程的几种创建方式详解
2019/08/29 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Python字典实现伪切片功能
2020/10/28 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
个人工作表现评语
2014/04/30 职场文书
个人欠款担保书
2014/05/20 职场文书
党员群众路线承诺书
2014/05/20 职场文书
项目合作意向书模板
2014/07/29 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
JavaScript实例 ODO List分析
2022/01/22 Javascript