理解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遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python爬取内容存入Excel实例
2019/02/20 Python
树莓派实现移动拍照
2019/06/22 Python
python的slice notation的特殊用法详解
2019/12/27 Python
基于python图像处理API的使用示例
2020/04/03 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
yy结婚证婚词
2014/01/10 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
副总经理岗位职责
2014/03/16 职场文书
农村葬礼主持词
2014/03/31 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
专项资金申请报告
2015/05/15 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android
Go gorilla/sessions库安装使用
2022/08/14 Golang