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 相关文章推荐
jquery异步请求实例代码
Jun 21 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
vue.js实现三级菜单效果
Oct 19 Javascript
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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
文秘应聘自荐书范文
2014/02/18 职场文书
大型营销活动计划书
2014/04/28 职场文书
社区禁毒工作方案
2014/06/02 职场文书
安全宣传标语口号
2014/06/06 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
7个关于Python的经典基础案例
2021/11/07 Python