JavaScript闭包和回调详解


Posted in Javascript onAugust 09, 2017

一、闭包

 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

闭包有三个特性:

1.函数嵌套函数;

2.函数内部可以引用外部的参数和变量;

3.参数和变量不会被垃圾回收机制回收。

 闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。使用闭包有一个优点,也是它的缺点,就是可以把局部变量驻留在内存中,可以避免使用全局变量。全局变量在每个模块都可调用,这势必将是灾难性的。所以推荐使用私有的,封装的局部变量。一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。但闭包的情况不同!

 示例一:

//闭包就是一个函数的返回值为另外一个函数,在outer外部可以通过这个返回的函数访问outer内的局部变量.

function outer(){
 var val = 0;
 return function (){
  val += 1;
  document.write(val + "<br />");
 };
}
var outObj = outer();
outObj();//1,执行val += 1后,val还在
outObj();//2
outObj = null;//val 被回收
var outObj1 = outer();
outObj1();//1
outObj1();//2

闭包会使变量始终保存在内存中,如果不当使用会增大内存消耗(如果上例中定义很多outer(),则内存中会保存很多val变量)。

javascript的垃圾回收原理:

 (1)、在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收;

 (2)、如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。

 那么使用闭包有什么好处呢?使用闭包的好处是:

1.希望一个变量长期驻扎在内存中

2.避免全局变量的污染

3.私有成员的存在

二、回调

 回调函数原理:我现在出发,到了通知你”。这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程。

 示例一:

function doSomething(callback){
 callback(1,2);
}
function numberAdd(a,b){
 document.write(a+b);
}
doSomething(numberAdd);//3

示例二:

function Thing(name){
 this.name = name;
}

//在Thing类里加入doSomething方法,这里使用了构造器调用模式

Thing.prototype.doSomething = function(callback){
 callback(this.name);
};
function showName(name){
 document.write(name);
}
var t = new Thing("zhangsan");
t.doSomething(showName);//zhangsan

如果你有一个数字组成的数组,你想写个排序的公共方法,但是排序方式(从小到大或从大到小)是调用该排序方法的人决定。实现该排序方法可以用回调来实现,当然你可以写2个方法,一个是从小到大的排序,一个是从大到小的排序方法。回调个人认为就是将决定权交给了实际业务开发工程师,由他来决定怎么去处理,这种思路跟我们平常接触的不同,有点不习惯,但是这种思路在异步编程中特别能看出它的好处,不知道我这么理解是否正确。下面示例代码就是回调的典型使用场合:

var arr = [25,13,33,8,23,32];
Array.prototype.sort = function(callback){
 var arr = this;
 var i = 0;//i在这里定义与在for循环的括号内(for(var i = 0; i < ...))定义是一样的
 for(; i < arr.length-1; i++){
  var j = i + 1;
  for(; j < arr.length;j++){
  if(callback(arr[i],arr[j])){
   var temp = arr[i];
   arr[i] = arr[j];
   arr[j] = temp;
  }
  } 
 }
return arr;
};
//a-b>0表示数组从小到大排序
arr.sort(function(a,b){
 return a - b > 0;
});
document.write(arr.join(",") + "<br />");//8,13,23,25,32,33
//b-a>0表示数组从大到小排序
arr.sort(function(a,b){
 return b - a > 0;
});
document.write(arr.join(","));//33,32,25,23,13,8

Javascript 相关文章推荐
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 #Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 #Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 #Javascript
详解用node搭建简单的静态资源管理器
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 #Javascript
vue.js框架实现表单排序和分页效果
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 #Javascript
You might like
js页面跳转常用的几种方式
2010/11/25 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
Python中的模块和包概念介绍
2015/04/13 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python yield 使用方法浅析
2017/05/20 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
opencv实现简单人脸识别
2021/02/19 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
考博自荐信
2013/10/25 职场文书
银行职业规划书范文
2013/12/28 职场文书
全陪导游欢迎词
2014/01/17 职场文书
优秀教师先进事迹
2014/01/22 职场文书
高中体育教学反思
2014/01/24 职场文书
作风建设演讲稿
2014/05/23 职场文书
建筑安全标语
2014/06/07 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript