轻松学习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 相关文章推荐
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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查询mssql出现乱码的解决方法
2014/12/29 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
详解PHP队列的实现
2019/03/14 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
js实现开关灯效果
2020/03/30 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python tkinter基本属性详解
2019/09/16 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
小学运动会演讲稿
2014/08/25 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang