理解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 相关文章推荐
splice slice区别
Oct 09 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
js+html实现周岁年龄计算器
Jun 25 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/12/06 PHP
php下MYSQL limit的优化
2008/01/10 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php自动获取关键字的方法
2015/01/06 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python执行get提交的方法
2015/04/29 Python
python 网络编程常用代码段
2016/08/28 Python
python爬虫之百度API调用方法
2017/06/11 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
婚内分居协议书范文
2014/11/26 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
Java 数据结构七大排序使用分析
2022/04/02 Java/Android