理解javascript中的回调函数(callback)
以下内容来源于:http://www.jb51.net/article/54641.htm
最近在看 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 传递了什么参数就行了。然后在调用方法或函数时,在参数里我们自己定义匿名函数来完成某些功能。
--------------------------------------------------------------------------------------------------
以下内容来源于:http://www.cnblogs.com/xcsn/archive/2013/01/03/2843218.html
在使用Jquery的时候,用到Callback(),回调函数的概念。而且很多。
比如:$.ajax({
url:"test.json",
type: "GET",
data: {username:$("#username").val()},
dataType: "json",
beforSend:function(){
// 禁用按钮防止重复提交
$("#submit").attr({ disabled: "disabled" });
},
complete:function(msg){
//请求完成后调用的回调函数(请求成功或失败时均调用)
} ,
error:function(msg){
//请求失败时被调用的函数
} ,
Sucess:function(msg){
//请求成功后调用的回调函数
}
});
-------------------------------------------------------------------------
回调函数大家都会用,只是Jquery封装了之后,不能让大家明白回调函数的真正使用。
JS Api 里这样解释:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 当然我们可以在JS当中来真正尝试一下回调函数的神奇。 如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。下面是代码: <html> <head> <title>回调函数(callback)</title> <script language="javascript" type="text/javascript"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> function a(callback) { alert("我是parent函数a!"); alert("调用回调函数"); //callback(); $("#id").load("page参数"); d(); alert(callback); } function b(){ alert("我是回调函数b"); $("#id").load("page参数"); e(); } function c(){ alert("我是回调函数c"); $.ajax({ ... }); d(); } function test() { a(b); a(c); } $(document).ready(function(){ function d(){ alert("我是Jquery定义的函数"); } var e = function(){ alert("我也是Jquery定义的函数") } } </script> </head> <body> <h1>学习js回调函数</h1> <button onClick=test()>click me</button> <p>应该能看到调用了两个回调函数</p> </body> </html> 估计大家也看到了,我在a(callback),b(),c()方法里都写了Jquery的ajax函数,注意,这里是ajax的函数。是有区别的,我分别调用了内置函数,和自己定义的函数。区别就在这里,因为Jquery和JS用的callback是一样的,互通的,所以在这里,Jquery的内置函数会被调用了。 但是自己定义的函数是不会被识别的,甚至会报没有这个function. ---------------------------------------------------------------------------------------------------------- 赠书《JavaScript高级程序设计(第三版)》5本
- JavaScript基础内容复习1
- 1-4-JS基础-条件判断
- 原生js实现Ajax
- javascript-datatable错误提示
- JavaScript函数表示式
- js总结-面向对象编程,DOM,BOM
- 第九章:BOM浏览器对象模型
- 【09类和模块】——6:javascript中的面向对象技术(集合类)
- JSP 2 特性 -- 表达式语言
- ExtJs之gridPanel的属性表格,编辑表格,表格分页,分组等技巧
- 【JavaScript】基础知识整理(四)
- javaScript——作用域和闭包概念
- js获取Url中参数值
- JavaScript 流程控制语句
- JS高级程序设置笔记(二)
- js中的作用域链
- 【JavaScript】基础知识整理(二)
- 图说js中的this——深入理解javascript中this指针
- DOM操作,javascript动态生成表格