在JavaScrip中，function是内置的类对象，也就是说它是一种类型的对象，能够和其它String、Array、Number、Object类的对象同样用于内置对象的管理。由于function其实是一种对象，它能够“存储在变量中，经过参数传递给(别一个)函数(function)，在函数内部建立，从函数中返回结果值”。
由于function是内置对象，咱们能够将它做为参数传递给另外一个函数，延迟到函数中执行，甚至执行后将它返回。这是在JavaScript中使用回调函数的精髓。本篇文章的剩余部分将全面学习JavaScript的回调函数。回调函数也许是JavaScript中使用最普遍的功能性编程技术，也许仅仅一小段JavaScript或jQuery的代码都会给开发者留下一种神秘感，阅读这篇文章后，也许会帮你消除这种神秘感。
回调函数来自一种著名的编程范式——函数式编程，在基本层面上，函数式编程指定的了函数的参数。函数式编程虽然如今的使用范围变小了，但它一直被“专业的聪明的”程序员看做是一种难懂的技术，之前是这样，将来也将是如此。javascript
幸运的是，函数式编程已经被阐述的像你我这样的通常人也能理解和使用。函数式编程最主要的技术之一就是回调函数，你很快会阅读到，实现回调函数就像传递通常的参数变量同样简单。这项技术如此的简单，以致于我都怀疑为何它常常被包含在JavaScript的高级话题中去。java
什么是回调或高级函数?
回调函数被认为是一种高级函数，一种被做为参数传递给另外一个函数(在这称做"otherFunction")的高级函数，回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式)，所以回调函数也被称为回调模式。node
思考一下下面这种在jQuery中经常使用的回调函数：
//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
正如在前面的例子所看到的，咱们传递了一个函数给click方法的形参，click方法将会调用(或执行)咱们传递给它的回调函数。这个例子就给出了JavaScript中使用回调函数的一个典型方式，并普遍应用于jQuery中。jquery
细细体味一下另外一个基本JavaScript的典型例子：程序员
var friends = ["Mike", "Stacy", "Andy", "Rick"];
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
咱们再一次用一样的方式传递了一个匿名的函数(没有函数名的函数)给forEach方法，做为forEach的参数。web
到目前为止，咱们传递了一个匿名的函数做为参数给另外一个函数或方法。在看其它更复杂的回调函数以前，让咱们理解一下回调的工做原理并实现一个本身的回调函数。ajax
回调函数是如何实现的？
咱们能够像使用变量同样使用函数，做为另外一个函数的参数，在另外一个函数中做为返回结果，在另外一个函数中调用它。当咱们做为参数传递一个回调函数给另外一个函数时，咱们只传递了这个函数的定义，并无在参数中执行它。mongodb
当包含(调用)函数拥有了在参数中定义的回调函数后，它能够在任什么时候候调用(也就是回调)它。shell
这说明回调函数并非当即执行，而是在包含函数的函数体内指定的位置“回调”它(形如其名)。因此，即便第一个jQuery的例子看起来是这样：express
//The anonymous function is not being executed there in the parameter.
//The item is a callback function
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
匿名函数将延迟在click函数的函数体内被调用，即便没有名称，也能够被包含函数经过 arguments对象访问。
回调函数是闭包的
看成为参数传递一个回调函数给另外一个函数时，回调函数将在包含函数函数体内的某个位置被执行，就像回调函数在包含函数的函数体内定义同样。这意味着回调函数是闭包的，想更多地了解闭包，请参考做者另外一个贴子Understand JavaScript Closures With Ease。从所周知，闭包函数能够访问包含函数的做用域，因此，回调函数能够访问包含函数的变量，甚至是全局变量。
实现回调函数的基本原则
简单地说，本身实现回调函数的时候须要遵循几条原则。
使用命名函数或匿名函数做为回调
在前面的jQuery和forEach的例子中，咱们在包含函数的参数中定义匿名函数，这是使用回调函数的通用形式之一，另外一个常常被使用的形式是定义一个带名称的函数，并将函数名做为参数传递给另外一个函数，例如：
// global variable
var allUserData = [];
// generic logStuff function that prints to console
function logStuff (userData) {
if ( typeof userData === "string")
{
console.log(userData);
}
else if ( typeof userData === "object")
{
for (var item in userData) {
console.log(item + ": " + userData[item]);
}
}
}
// A function that takes two parameters, the last one a callback function
function getInput (options, callback) {
allUserData.push (options);
callback (options);
}
// When we call the getInput function, we pass logStuff as a parameter.
// So logStuff will be the function that will called back (or executed) inside the getInput function
getInput ({name:"Rich", speciality:"JavaScript"}, logStuff);
// name: Rich
// speciality: JavaScript
传递参数给回调函数
由于回调函数在执行的时候就和通常函数同样，咱们能够传递参数给它。能够将包含函数的任何属性(或全局的属性)做为参数传递回调函数。在上一个例子中，咱们将包含函数的options做为参数传递给回调函数。下面的例子让咱们传递一个全局变量或本地变量给回调函数：
//Global variable
var generalLastName = "Clinton";
function getInput (options, callback) {
allUserData.push (options);
// Pass the global variable generalLastName to the callback function
callback (generalLastName, options);
}
在执行以前确保回调是一个函数
在调用以前，确保经过参数传递进来的回调是一个须要的函数一般是明智的。此外，让回调函数是可选的也是一个好的实践。
让咱们重构一下上面例子中的getInput函数，确保回调函数作了适当的检查。
function getInput(options, callback) {
allUserData.push(options);
// Make sure the callback is a function
if (typeof callback === "function") {
// Call it, since we have confirmed it is callable
callback(options);
}
}
若是getInput函数没有作适当的检查(检查callback是不是函数，或是否经过参数传递进来了),咱们的代码将会致使运行时错误。
使用含有this对象的回调函数的问题
当回调函数是一个含有this对象的方法时，咱们必须修改执行回调函数的方法以保护this对象的内容。不然this对象将会指向全局的window对象(若是回调函数传递给了全局函数)，或指向包含函数。让咱们看看下面的代码：
// Define an object with some properties and a method
// We will later pass the method as a callback function to another function
var clientData = {
id: 094545,
fullName: "Not Set",
// setUserName is a method on the clientData object
setUserName: function (firstName, lastName) {
// this refers to the fullName property in this object
this.fullName = firstName + " " + lastName;
}
}
function getUserInput(firstName, lastName, callback) {
// Do other stuff to validate firstName/lastName here
// Now save the names
callback (firstName, lastName);
}
在下面的示例代码中，当clientData.setUserName被执行时，this.fullName不会设置clientData 对象中的属性fullName，而是设置window 对象中的fullName，由于getUserInput是一个全局函数。出现这种现象是由于在全局函数中this对象指向了window对象。
getUserInput ("Barack", "Obama", clientData.setUserName);
console.log (clientData.fullName);// Not Set
// The fullName property was initialized on the window object
console.log (window.fullName); // Barack Obama
使用Call或Apply函数保护this对象
咱们能够经过使用 Call 或 Apply函数来解决前面示例中的问题。到目前为止，咱们知道JavaScript中的每个函数都有两个方法:Call和Apply。这些方法能够被用来在函数内部设置this对象的内容，并内容传递给函数参数指向的对象。
Call takes the value to be used as the this object inside the function as the first parameter, and the remaining arguments to be passed to the function are passed individually (separated by commas of course). The Apply function’s first parameter is also the value to be used as the thisobject inside the function, while the last parameter is an array of values (or the arguments object) to pass to the function. (该段翻译起来太拗口了，放原文本身体会)
这听起来很复杂，但让咱们看看Apply和Call的使用是多么容易。为解决前面例子中出现的问题，咱们使用Apply函数以下：
//Note that we have added an extra parameter for the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback, callbackObj) {
// Do other stuff to validate name here
// The use of the Apply function below will set the this object to be callbackObj
callback.apply (callbackObj, [firstName, lastName]);
}
经过Apply函数正确地设置this对象，如今咱们能够正确地执行回调函数并它正确地设置clientData对象中的fullName属性。
// We pass the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply function to set the this object
getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
// the fullName property on the clientData was correctly set
console.log (clientData.fullName); // Barack Obama
咱们也可使用Call 函数，但在本例中咱们使用的Apply 函数。
多重回调函数也是容许的
咱们能够传递多个回调函数给另外一个函数，就像传递多个变量同样。这是使用jQuery的AJAX函数的典型例子：
function successCallback() {
// Do stuff before send
}
function successCallback() {
// Do stuff if success message received
}
function completeCallback() {
// Do stuff upon completion
}
function errorCallback() {
// Do stuff if error received
}
$.ajax({
url:"http://fiddle.jshell.net/favicon.png",
success:successCallback,
complete:completeCallback,
error:errorCallback
});
“回调地狱”的问题和解决方案
异步代码执行是一种简单的以任意顺序执行的方式，有时是很常见的有不少层级的回调函数，你看起来像下面这样的代码。下面这种凌乱的代码称做“回调地狱”，由于它是一种包含很是多的回调的麻烦的代码。我是在node-MongoDB-native里看到这个例子的，MongoDB驱动Node.js.示例代码就像这样：
var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
p_client.dropDatabase(function(err, done) {
p_client.createCollection('test_custom_key', function(err, collection) {
collection.insert({'a':1}, function(err, docs) {
collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
cursor.toArray(function(err, items) {
test.assertEquals(1, items.length);
// Let's close the db
p_client.close();
});
});
});
});
});
});
你不太可能在本身的代码里碰到这个的问题，但若是你碰到了(或之后偶然碰到了)，那么有如下两种方式解决这个问题。
- 命名并定义你的函数，而后传递函数名做为回调，而不是在主函数的参数列表里定义一个匿名函数。
- 模块化：把你的代码划分红一个个模块，这样你能够空出一部分代码块作特殊的工做。而后你能够将这个模型引入到你的大型应用程序中。
实现本身的回调函数
如今你已经彻底理解(我相信你已经理解了，若是没有请快速从新阅读一遍)了JavaScript关于回调的所用特性而且看到回调的使用是如此简单但功能却很强大。你应该看看本身的代码是否有机会使用回调函数，有如下需求时你能够考虑使用回调：
- 避免重复代码 (DRY—Do Not Repeat Yourself)
- 在你须要更多的通用功能的地方更好地实现抽象(可处理各类类型的函数)。
- 加强代码的可维护性
- 加强代码的可读性
- 有更多定制的功能
实现本身的回调函数很简单，在下面的例子中，我能够建立一个函数完成所用的工做：获取用户数据，使用用户数据生成一首通用的诗，使用用户数据来欢迎用户，但这个函数将会是一个凌乱的函数，处处是if/else的判断，甚至会有不少的限制并没有法执行应用程序可能须要的处理用户数据的其它函数。
替而代之的是我让实现增长了回调函数，这样主函数获取用户数据后能够传递用户全名和性别给回调函数的参数并执行回调函数以完成任何任务。
简而言之，getUserInput函数是通用的，它能够执行多个拥有各类功能的回调函数。
// First, setup the generic poem creator function; it will be the callback function in the getUserInput function below.
function genericPoemMaker(name, gender) {
console.log(name + " is finer than fine wine.");
console.log("Altruistic and noble for the modern time.");
console.log("Always admirably adorned with the latest style.");
console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}
//The callback, which is the last item in the parameter, will be our genericPoemMaker function we defined above.
function getUserInput(firstName, lastName, gender, callback) {
var fullName = firstName + " " + lastName;
// Make sure the callback is a function
if (typeof callback === "function") {
// Execute the callback function and pass the parameters to it
callback(fullName, gender);
}
}
调用getUserInput函数并传递genericPoemMaker函数做为回调：
getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Output
/* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/
由于getUserInput 函数只处理用户数据的输入，咱们能够传递任何回调函数给它。例如咱们能够像这样传递一个greetUser函数。
function greetUser(customerName, sex) {
var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
console.log("Hello, " + salutation + " " + customerName);
}
// Pass the greetUser function as a callback to getUserInput
getUserInput("Bill", "Gates", "Man", greetUser);
// And this is the output
Hello, Mr. Bill Gates
和上一个例子同样，咱们调用了同一个getUserInput 函数，但此次却执行了彻底不一样的任务。
如你所见，回调函数提供了普遍的功能。尽管前面提到的例子很是简单，在你开始使用回调函数的时候思考一下你能够节省多少工做，如何更好地抽象你的代码。加油吧！在早上起来时想想，在晚上睡觉前想想，在你休息时想想……
咱们在JavaScript中常用回调函数时注意如下几点，尤为是如今的web应用开发，在第三方库和框架中
- 异步执行(例如读文件，发送HTTP请求)
- 事件监听和处理
- 设置超时和时间间隔的方法
- 通用化：代码简洁