理解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 相关文章推荐
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
vue-ajax小封装实例
Sep 18 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue动态绑定style样式
Apr 20 Vue.js
详解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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
了解重排与重绘
2019/05/29 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python中退出多层循环的方法
2018/11/27 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python 并发下载器实现方法示例
2019/11/22 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
园林毕业生自我鉴定范文
2013/12/29 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
财务负责人任命书
2014/06/06 职场文书
2014年教师节寄语
2014/08/11 职场文书
爱情保证书
2015/01/17 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
利用Apache Common将java对象池化的问题
2022/06/16 Servers
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python