理解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使用定时函数实现跳转到某个页面
Dec 25 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
Express.JS使用详解
Jul 17 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
js实现无缝循环滚动
Jun 23 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 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使用者状态管理功能的应用
2006/10/09 PHP
收集的PHP中与数组相关的函数
2007/03/22 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
js a标签点击事件
2017/03/30 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
师范生自荐信范文
2013/10/06 职场文书
《口技》教学反思
2014/02/21 职场文书
课例研修方案
2014/05/31 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Go语言编译原理之源码调试
2022/08/05 Golang