轻松学习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右键菜单效果代码
Jul 21 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
js获取div高度的代码
Aug 09 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
javascript 写类方式之八
Jul 05 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
Python 第一步 hello world
2009/09/25 Python
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python函数的5种参数详解
2017/02/24 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
UDP协议功能
2013/01/06 面试题
C# .NET面试题
2015/11/28 面试题
办公室打字员岗位职责
2014/04/16 职场文书
六年级学生评语
2014/04/22 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
入团申请书格式
2019/06/20 职场文书
详解nginx location指令
2022/01/18 Servers
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js