理解javascript中的回调函数(callback)


Posted in Javascript onSeptember 02, 2014

最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用。如果这个概念理解不了,nodejs、express 的代码就会看得一塌糊涂。比如:

app.use(function(req, res, next) {

    var err = new Error('Not Found');

    err.status = 404;

    next(err);

});

app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了。这段代码怎么理解呢?我们先来了解回调函数这个概念。
首先要了解,在 js 中,函数也是对象,可以赋值给变量,可以作为参数放在函数的参数列表中。比如:
var doSomething = function(a,b)

{

 return a + b;

}

这段代码的意思是定义一个匿名函数,这个匿名函数除了没有名字之外,其他跟普通的函数没有什么两样。然后把匿名函数赋值给变量doSomething。接下来我们调用:
console.log(doSomething(2,3));

这样会输出5。

回调函数,就是放在另外一个函数(如 parent)的参数列表中,作为参数传递给这个 parent,然后在 parent 函数体的某个位置执行。说来抽象,看例子:

// To illustrate the concept of callback

var doit = function(callback)

{

    var a = 1,

        b = 2,

        c = 3;

    var t = callback(a,b,c);

    return t + 10;

};

var d = doit(function(x,y,z){

    return (x+y+z);

});

console.log(d);

先定义 doit 函数,有一个参数 callback。这个 callback 就是回调函数,名字可以任意取。看函数体,先定义三个变量 a,b,c。然后调用 callback 函数。最后返回一个值。

下面就调用 doit 函数了。要注意的是,刚才定义 doit 时,callback 并没有定义,所以刚才并不知道 callback 是干什么用的。这其实很好理解,我们平时定义函数的时候,参数也只是给出了一个名字,比如 a,在函数体中使用 a,但整个过程也并不知道 a 到底是什么,只有在调用那个函数的时候才指定 a 的具体值,比如2.回过头来,在调用 doit 的时候,我们就需要指定 callback 究竟是个什么东西了。可以看到,这个函数完成了一个 sum 功能。

上述代码的执行过程是:

调用 doit函数,参数是一个匿名函数;进入 doit 的函数体中,先定义 a,b,c,然后执行刚才的匿名函数,参数是 a,b,c,并返回一个 t,最后返回一个 t+10给 d。

回到最初的例子,app.use(...)是函数调用。我们可以想象,之前一定定义了一个 use 方法,只是这里没有给出。这两个例子一对比,就可以马上理解了。

在使用nodejs、express 的时候,不可能每个方法或函数我们都要找到它的函数定义去看一看。所以只要知道那个定义里面给 callback 传递了什么参数就行了。然后在调用方法或函数时,在参数里我们自己定义匿名函数来完成某些功能。

Over!

Javascript 相关文章推荐
javascript 二进制运算技巧解析
Nov 27 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
js中运算符&& 和 || 的使用记录
Aug 21 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
详解js闭包
Sep 02 #Javascript
jquery delay()介绍及使用指南
Sep 02 #Javascript
使用jquery实现放大镜效果
Sep 02 #Javascript
javascript初学者常用技巧
Sep 02 #Javascript
js/jquery判断浏览器的方法小结
Sep 02 #Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 #Javascript
jQuery级联操作绑定事件实例
Sep 02 #Javascript
You might like
PHP查询分页的实现代码
2017/06/09 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python多维数组切片方法
2018/04/13 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
单身联谊活动方案
2014/01/29 职场文书
三年级科学教学反思
2014/01/29 职场文书
学校十一活动方案
2014/02/01 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
就业导师推荐信范文
2015/03/27 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书