理解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 相关文章推荐
用js怎么把&字符换成"&amp:"
Oct 19 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
详解小程序循环require之坑
Mar 08 Javascript
JS原型与继承操作示例
May 09 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
香妃
2021/03/03 冲泡冲煮
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
jquery cookie插件代码类
2009/05/26 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
python根据日期返回星期几的方法
2015/07/06 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
办公室内勤工作职责
2013/12/11 职场文书
工厂厂长的职责
2013/12/12 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
社区敬老月活动总结
2015/05/07 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android