理解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字符串截取函数substr substring slice使用对比
Nov 27 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
使用console进行性能测试
Apr 27 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
node中的session的具体使用
Sep 14 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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中进行身份认证
2006/10/09 PHP
php2html php生成静态页函数
2008/12/08 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
smarty自定义函数用法示例
2016/05/20 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python with用法实例
2015/04/14 Python
python实现给数组按片赋值的方法
2015/07/28 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
考试退步检讨书
2014/01/15 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
Node.js实现断点续传
2021/06/23 Javascript
使用Python获取字典键对应值的方法
2022/04/26 Python