轻松学习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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
jQuery Ajax全解析
Feb 13 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 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公用函数列表[正则]
2007/02/22 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
python使用scrapy解析js示例
2014/01/23 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python异常处理例题整理
2019/07/07 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
基于python监控程序是否关闭
2020/01/14 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
公司担保书格式范文
2014/05/12 职场文书
校庆活动策划方案
2014/06/05 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
党支部对转正的意见
2015/06/02 职场文书
化验室安全管理制度
2015/08/06 职场文书