轻松学习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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
Vue核心概念Getter的使用方法
Jan 18 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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新建文件自动编号的思路与实现
2011/06/27 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
让CodeIgniter的ellipsize()支持中文截断的方法
2014/06/12 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
node使用request请求的方法
2019/12/20 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
pyramid配置session的方法教程
2013/11/27 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
详解python3中的真值测试
2018/08/13 Python
python的re模块使用方法详解
2019/07/26 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python collections模块的使用
2020/10/16 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
北京英文导游词
2015/02/12 职场文书
反腐倡廉观后感
2015/06/08 职场文书
2015双创工作总结
2015/07/24 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫