本文深入解析 JavaScript 中回调函数的核心原理与应用场景。通过“出发通知”的异步流程示例，阐明回调机制。详细演示了基本匿名函数用法，以及利用 call 和 apply 方法传递上下文和参数的高级技巧，结合代码实例帮助开发者掌握回调函数的实际使用。
回调函数概述
在深入探讨之前，许多开发者可能对 JavaScript 回调函数的具体使用方式及其实际作用感到困惑。本文将通过具体的学习案例，为大家详细介绍回调函数的使用方法，供需要了解的读者参考。
回调函数原理
回调函数的基本工作原理如下：
可以将其理解为“我现在出发，到了之后通知你”这一异步流程。在“我出发”（即函数执行）的过程中，“你”可以并行处理其他事务；当“我到达”（函数执行完毕）时，通过“通知你”（即触发回调）来继续后续的流程。
回调函数示例
具体实现示例如下：
基本方法
1. 基础用法
<script language="javascript" type="text/javascript">
function doSomething(callback) {
// …
// Call the callback
callback('stuff', 'goes', 'here');
}
function foo(a, b, c) {
// I'm the callback
alert(a + " " + b + " " + c);
}
doSomething(foo);
</script>或者采用匿名函数的形式进行定义。
<script language="javascript" type="text/javascript">
function dosomething(damsg, callback){
alert(damsg);
if(typeof callback == "function")
callback();
}
dosomething("回调函数", function(){
alert("和 jQuery 的 callbacks 形式一样!");
});
</script>
高级方法
2. 高级用法 这里演示如何使用 JavaScript 的 call 方法。
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.call(this);
}
function foo() {
alert(this.name);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Joe" via `foo`
</script>
传参数
传递参数
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback, salutation) {
// Call our callback, but using our own instance as the context
callback.call(this, salutation);
}
function foo(salutation) {
alert(salutation + " " + this.name);
}
var t = new Thing('Joe');
t.doSomething(foo, 'Hi'); // Alerts "Hi Joe" via `foo`
</script>
使用 JavaScript 的 apply 方法来传递参数。
<script language="javascript" type="text/javascript">
function Thing(name) {
this.name = name;
}
Thing.prototype.doSomething = function(callback) {
// Call our callback, but using our own instance as the context
callback.apply(this, ['Hi', 3, 2, 1]);
}
function foo(salutation, three, two, one) {
alert(salutation + " " + this.name + " – " + three + " " + two + " " + one);
}
var t = new Thing('Joe');
t.doSomething(foo); // Alerts "Hi Joe – 3 2 1" via `foo`
</script>
综合例子
示例说明： //假设提供的数据源是一个整数，代表某学生的分数。当 num<=0 时，由底层逻辑处理；当 n>0 时，由高层逻辑处理。
//请将下方代码保存为 1.js 文件。
function f(num,callback){
if(num<0) {
alert("调用低层函数处理!");
alert("分数不能为负,输入错误!");
}else if(num==0){
alert("调用低层函数处理!");
alert("该学生可能未参加考试！");
}else{
alert("调用高层函数处理!");
callback();
}
}
//请将下方的 test.html 文件保存，并确保与 1.js 位于同一目录下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="1.js" type="text/javascript"></script>
<title>无标题文档</title>
<script type="text/javascript">
function test(){
var p=document.getElementById("pp");
pp.innerText="";
var num=document.getElementById("score").value;
f(num,function(){ //匿名高层处理函数
if(num<60) alert("未及格！");
else if(num<=90) alert("该生成绩优良！");
else alert("该生成绩优秀!"); })
pp.innerText="by since1978 qq558064!"
}
</script>
</head>
<body>
<p>
回调函数示例:当学生成绩score<=0分时候，由底层处理；当score>0时，由高层处理。
</p>
请输入学生成绩<input type="text" id="score">
<input type="button" onClick="test()" value=" 看看结果">
<p id="pp"></p>
</body>
</html>
其他补充
以下是其他网友的补充内容：
JavaScript 中的回调模式通常表现为：
其形式大致如下：
function writeCode(callback){
//执行一些事物，
callback();
//...
}
function intrduceBugs(){
//....引入漏洞
}
writeCode(intrduceBugs); 我们将函数引用传递给 writeCode()，使 writeCode 能够在适当的时候（例如返回后）执行该函数。
首先看一个不够完善的示例（后续将对其进行重构）：
//模拟查找页面中的dom节点，将查找到的节点存在数组里面统一返回
//此函数只用于查找不对dom节点做任何的逻辑处理
var findNodes = function(){
var i = 100000;//大量的循环，
var nodes = [];//用于存储找到的dom节点
var found;
while(i){
i -=1;
nodes.push(found);
}
return nodes;
}
//将查找找到的dom节点全部隐藏
var hide = function(nodes){
var i = 0,
max = nodes.length;
for(;i<max;i++){
//findNodes后面有括号代表立即执行，先执行findNodes()然后执行hide()< hide(findNodes()); 执行函数 } ;
nodes[i].style.display="none"
}
上面的方法是低效的，以为hide()必须再次遍历有findNodes()返回的数组节点，如何避免这种多余的循环呢。
我们不能直接在findNodes中对查询到的节点进行隐藏（这样检索就可修改逻辑耦合了），那么他就不再是一个通用函数了。
解决方法是用回调模式，可以将节点隐藏逻辑以回调函数方式传递给findNodes()并委托其执行
//重构findNodes以接受一个回调函数
var findNodes = fucntion(callback){
var i = 100000,
nodes = [],
found;
//检查回调函数是否可用调用的
if(typeof callback !== 'function'){
callback = false;
}
while(i){
i -= 1;
if(callback){
callback(found);
}
nodes.push(found);
}
return nodes;
}
//回调函数
var hide = function(node){
node.style.display = 'none ';
}
//找到后续节点并在后续执行中对其进行隐藏
findNodes(hide);//先执行findNodes然后执行hide，当然回调函数也可以在调用主函数时创建：findNodes(function(node){node.style.display = 'none';});