轻松学习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 Array增加each方法
Apr 07 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
angular.js实现购物车功能
Oct 23 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 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相关的一些故障解决
2020/08/19 PHP
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
在vue中使用Base64转码的案例
2020/08/07 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
python计算圆周率pi的方法
2015/07/11 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
临床医学大学生求职信
2013/09/28 职场文书
运动会口号大全
2014/06/07 职场文书
路政管理求职信
2014/06/18 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
实习证明格式范文
2014/10/14 职场文书
民用住房租房协议书
2014/10/29 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
vue特效之翻牌动画
2022/04/20 Vue.js
Go web入门Go pongo2模板引擎
2022/05/20 Golang