JavaScript闭包和回调详解

 更新时间:2017年08月09日 15:40:58   作者:╰.yuyu.*  
本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法

一、闭包

 闭包(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


相关文章

  • JS实现选项卡实例详解

    JS实现选项卡实例详解

    这篇文章主要介绍了JS实现选项卡的方法,结合实例形式详细讲述了JavaScript实现选项卡的布局与功能实现的完整步骤及相关技巧,需要的朋友可以参考下
    2015-11-11
  • JS控件的生命周期介绍

    JS控件的生命周期介绍

    JS控件的生命周期跟其他平台UI的生命周期类似,但是又有自己的特点,我们只有将控件的生命周期划分清晰,所有的控件编写、mixins的编写和plugin的编写才能遵循控件的生命周期做统一的管理
    2012-10-10
  • 基于JS实现导航条flash导航条

    基于JS实现导航条flash导航条

    flash导航条在网站建设中应用比较广泛,此种效果给浏览者带来极好的视觉效果,非常棒,下面小编给大家介绍基于JS实现导航条flash导航条,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • JS实现返回上一页并刷新页面的方法分析

    JS实现返回上一页并刷新页面的方法分析

    这篇文章主要介绍了JS实现返回上一页并刷新页面的方法,结合实例形式分析了javascript针对移动端、PC端浏览器的页面缓存刷新相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • uniapp发送formdata表单请求2种方法(全网最简单方法)

    uniapp发送formdata表单请求2种方法(全网最简单方法)

    这篇文章主要给大家介绍了关于uniapp发送formdata表单请求2种方法的相关资料,本文介绍的方法应该是全网最简单方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • js千分位实现方法大汇总

    js千分位实现方法大汇总

    这篇文章主要介绍了js千分位实现方法大汇总,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • js小数计算小数点后显示多位小数的实现方法

    js小数计算小数点后显示多位小数的实现方法

    下面小编就为大家带来一篇js小数计算小数点后显示多位小数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js取两个数组的交集|差集|并集|补集|去重示例代码

    js取两个数组的交集|差集|并集|补集|去重示例代码

    求两个集合的补集、交集、差集、并集等等在实际应用中经常会使用到,下面与大家分享下具体的实现代码,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • 在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    在table中插入多行,能使用与insertAdjacentHTML相似的功能
    2010-06-06
  • 让JavaScript和其它资源并发下载的方法

    让JavaScript和其它资源并发下载的方法

    这篇文章主要介绍了让JavaScript和其它资源并发下载的方法,JavaScript并发下载主要目的在于解决JS加载会阻碍页面呈现的问题,需要的朋友可以参考下
    2014-10-10

最新评论