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 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JavaScript常用工具函数库汇总
Sep 17 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
如何把PHP转成EXE文件
2006/10/09 PHP
PHP SQLite类
2009/05/07 PHP
php 高效率写法 推荐
2010/02/21 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php组合排序简单实现方法
2016/10/15 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js实现动态时钟
2020/03/12 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
python模块导入的细节详解
2018/12/10 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
赡养老人协议书
2014/04/21 职场文书
搞笑爱情保证书
2014/04/29 职场文书
博士论文答辩开场白
2015/06/01 职场文书
英语投诉信范文
2015/07/03 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技