轻松学习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实现打开本地文件或文件夹
Mar 09 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
带你彻底理解JavaScript中的原型对象
Apr 14 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语法(4)
2006/10/09 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Python实现字符串格式化的方法小结
2017/02/20 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python切片操作深入详解
2018/07/27 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python grpc超时机制代码示例
2020/09/14 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
即将毕业大学生自荐信
2014/01/24 职场文书
质量月活动策划方案
2014/03/10 职场文书
国贸专业求职信
2014/06/28 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年加油站工作总结
2014/12/04 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
MySQL池化框架学习接池自定义
2022/07/23 MySQL