轻松学习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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
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中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
javascript 对象的定义方法
2007/01/10 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
在vue中使用防抖函数组件操作
2020/07/26 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
英文自我鉴定
2013/12/10 职场文书
高中物理教学反思
2014/02/08 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
给上级领导的感谢信
2015/01/22 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书