理解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 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
理解Javascript闭包
Nov 01 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
vue全局使用axios的操作
Sep 08 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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 max_execution_time执行时间问题
2011/07/17 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP四种基本排序算法示例
2015/04/09 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
英文演讲稿
2014/05/15 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年工程部工作总结
2015/04/30 职场文书
论语读书笔记
2015/06/26 职场文书
Python何绘制带有背景色块的折线图
2022/04/23 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers