javascript闭包功能与用法实例分析


Posted in Javascript onApril 06, 2017

本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:

理解闭包

闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化。

闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回

我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2。

function f1(){
  var n=999;
  function f2(){
    alert(n); // 999
  }
}

f2可以访问f1的作用域,反过来就不行了。现在我们想访问f1中的n,在外层却访问不到,怎么办呢?将f2作为f1的返回值就可以了:

function f1(){
  var n=999;
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999

这个就是闭包。

其实也很简单,那么闭包有什么用呢?

闭包的使用

之前的自己只知道闭包的概念,却并不知道其存在的价值和意义。直到自己在项目中遇到类似的问题后,才发现只有闭包才能解决的情况。

闭包是使用可以带来以下好处

1. 希望一个变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在

我们刚才说到过,闭包可以读取到函数内部的变量,这是由于闭包后函数的堆栈不会释放,也就是说这些值始终保持在内存中。这是一个优点,也是一个缺点。

我们可以通过闭包来实现一个计数器,而不用担心全局变量的污染:

function f1(){
  var n=999;
  nAdd=function(){n+=1}
  function f2(){
    alert(n);
  }
  return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000

可以看到n一直存储在内存中,并没有在f1调用后被自动清除。

我们再来看看如何通过闭包来模拟JavaScript中的私有成员:

var aaa = (function(){
  var a = 1;
  function bbb(){
    a++;
    alert(a);
  }
  function ccc(){
    a++;
    alert(a);
  }
  return {
    b:bbb,    //json结构
    c:ccc
  }
})();
aaa.b();  //2
aaa.c();  //3

这样就可以提供指定的变量供外界访问了。

闭包解决的问题

这是一个很常见的问题,就是利用javascript处理循环的时候,索引i的值不能有效的利用:

javascript闭包功能与用法实例分析

这里改成如下格式,形成10个闭包来解决即可:

javascript闭包功能与用法实例分析

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
angular.js分页代码的实例
Jul 27 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
You might like
yii gridview实现时间段筛选功能
2017/08/15 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python 元类实例解析
2018/04/04 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python之文件读取一行一行的方法
2018/07/12 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python实现学生信息管理系统源码
2021/02/22 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
改革共识倡议书
2014/08/29 职场文书
实践论读书笔记
2015/06/29 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
接收函
2019/04/22 职场文书