深入理解JavaScript回调函数：从定义到异步处理与闭包实战

回调函数定义

一、回调函数定义

回调函数本质上是通过函数指针（即函数引用）进行调用的函数。当我们将一个函数的引用作为参数传递给另一个函数，并在特定条件下通过该指针调用其所指向的函数时，即构成了回调。回调函数并非由实现方直接调用，而是在特定事件或条件触发时，由另一方调用以响应该事件。在JavaScript语境下，若函数A作为参数（函数引用）被传入函数B，且函数B执行了函数A，则函数A被称为回调函数。若该函数无具体名称（即函数表达式），则称为匿名回调函数。需注意，callback并不局限于异步场景，在同步（阻塞）操作中同样常见，例如需在特定操作完成后执行后续逻辑时。

例子

以下展示一个在同步（阻塞）场景中使用回调的示例，旨在确保func1代码执行完毕后立即执行func2。


var func1=function(callback){
  //do something.
  (callback && typeof(callback) === "function") && callback();
}
func1(func2);
  var func2=function(){
}

回调函数的使用场合

二、回调函数的使用场合

回调函数广泛应用于多种场景： 1. 资源加载：包括动态加载JS文件、加载iframe、AJAX请求回调以及图片加载完成后的处理。 2. DOM事件及Node.js事件：基于回调机制，但需注意Node.js中可能出现的多层回调嵌套问题。 3. 定时器Hack：setTimeout延迟时间为0时，其调用的函数本质上是callback的体现，常用于将任务推迟到当前调用栈清空后执行。 4. 链式调用：在赋值器（setter）方法或无返回值的方法中，通过回调函数实现链式调用较为容易；而取值器（getter）因需返回具体数据而非this指针，实现链式调用较复杂，可通过回调函数解决。 5. 异步返回值获取：setTimeout和setInterval为异步函数，其调用时序独立于主程序流程。由于程序不会等待其返回值（否则失去异步意义），return已无作用，必须使用callback将计时器执行结果通知给代理函数以进行及时处理。

函数也是对象

三、函数也是对象

理解回调函数的前提是明确JavaScript中函数的规则。在JavaScript中，函数是一种特殊的对象，确切地说，是通过Function()构造函数创建的Function对象。Function对象内部包含一个字符串，该字符串存储了函数的JavaScript代码。对于从C或Java等语言转来的开发者而言，这可能显得反直觉，因为代码被视为字符串。但在JavaScript中，数据与代码的界限较为模糊，这种设计使得代码可以像数据一样被处理。


//可以这样创建函数
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3);  //6

这种设计带来的一个显著优势是，可以将代码（即函数）作为参数传递给其他函数，也可以像传递普通变量或对象一样传递函数引用，因为从字面上看，函数只是对象的一种。

传递函数作为回调

在JavaScript中，将函数作为参数传递非常简单直观。


function fn(arg1, arg2, callback){
  var num = Math.ceil(Math.random() * (arg1 - arg2) + arg2);
  callback(num);//传递结果
}

fn(10, 20, function(num){
  console.log("Callback called! Num: " + num); 
});//结果为10和20之间的随机数

尽管这种做法看似繁琐，甚至可能让人觉得“为何不直接返回结果”，但在必须使用回调函数的场景下，这种模式的优势便凸显出来。

别挡道

传统函数通过参数接收输入数据，并通过return语句返回结果。从结构上看，这形成了一个输入点和一个输出点，函数本质上是实现从输入到输出映射的过程，这种模式易于理解。

然而，当函数处理过程极其耗时（如AJAX请求）时，是等待处理完成还是使用回调进行异步处理？此时，回调函数至关重要。使用回调函数允许代码继续执行其他任务，而无需空等。在实际开发中，JavaScript广泛使用异步调用，此处强烈推荐使用回调模式以提升性能。

以下是一个更全面的AJAX加载XML文件示例，其中使用了call()函数，在请求对象（requested object）的上下文中调用回调函数。


function fn(url, callback){
  var httpRequest;　　　　//创建XHR
  httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() :　　　
　　　　  window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"       ) : undefined;//针对IE进行功能性检测

  httpRequest.onreadystatechange = function(){
   if(httpRequest.readystate === 4 
        && httpRequest.status === 200){　　//状态判断
     callback.call(httpRequest.responseXML); 
    }
  };
  httpRequest.open("GET", url);
  httpRequest.send();
}

fn("text.xml", function(){　　　　//调用函数
  console.log(this); 　　//此语句后输出
});

console.log("this will run before the above callback.");　　//此语句先输出

我们进行异步处理，意味着在发起请求时，便告知系统在请求完成时调用我们的函数。在实际应用中，onreadystatechange事件处理程序还需考虑请求失败的情况，本例假设xml文件存在且能被浏览器成功加载。在此示例中，异步函数被分配给onreadystatechange事件，因此不会立即执行。

最终，第二个console.log语句会先执行，因为回调函数直到请求完成才会被执行。

若上述示例仍显晦涩，请参考以下示例：


function foo(){
  var a = 10;
  return function(){
    a *= 2;
    return a;    
  };  
}
var f = foo();
f(); //return 20.
f(); //return 40.

函数在外部调用时，依然可以访问变量a。这归因于JavaScript的词法作用域机制。函数在定义它们的作用域（如上述例子中foo内部的作用域）中运行，而非运行该函数的作用域中。只要f被定义在foo中，它就能访问foo中定义的所有变量，即使foo的执行已经结束。这是因为其作用域被保存了下来，但只有返回的那个函数可以访问这个保存下来的作用域。返回一个内嵌匿名函数是创建闭包最常用的手段。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

JavaScript回调函数详解：同步异步应用与闭包机制

回调函数定义

回调函数的使用场合

函数也是对象

传递函数作为回调

别挡道

实用工具推荐