理解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 DOM模型操作
Dec 28 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 Javascript
TypeScript 内置高级类型编程示例
Sep 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python调用java的Webservice示例
2014/03/10 Python
详解Python传入参数的几种方法
2019/05/16 Python
使用python画社交网络图实例代码
2019/07/10 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python实现超市商品销售管理系统
2019/11/22 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
美国时尚女装在线:Missguided
2016/12/03 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Java程序员常见面试题
2015/07/16 面试题
初一英语教学反思
2014/01/11 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
个人作风剖析材料
2014/02/02 职场文书
高中军训感言400字
2014/02/24 职场文书
2015年入党决心书
2015/02/05 职场文书
主持人开场白台词
2015/05/29 职场文书
2019军训心得体会
2019/06/27 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python