轻松学习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和javascript的区别(常用方法比较)
Jul 04 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
JavaScript模块详解
Dec 18 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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注入漏洞攻击建议分享
2012/03/01 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
python配置文件写入过程详解
2019/10/19 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers