理解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 应用技巧集合[推荐]
Aug 30 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
js实现无缝轮播图
Mar 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
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
小程序实现录音功能
2020/09/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python使用minimax算法实现五子棋
2019/07/29 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
服务口号大全
2014/06/11 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫