理解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中的console.dir()函数介绍
Dec 29 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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 magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python模块WSGI使用详解
2018/02/02 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Puppeteer使用示例详解
2019/06/20 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
2014年元旦感言
2014/03/06 职场文书
感恩节活动策划方案
2014/05/16 职场文书
食品安全演讲稿
2014/09/01 职场文书
五好家庭事迹材料
2014/12/20 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
机械生产实习心得体会
2016/01/22 职场文书
导游词之太原天龙山
2020/01/02 职场文书