JavaScript 中的回调函数

Posted 2020-10-11 似

原文：http://javascriptissexy.com/

翻译：http://blog.csdn.net/luoweifu/article/details/41466537

【建议阅读原文，以下为个人学习笔记，有部分知识点补充，不喜勿喷】

在JavaScrip中，function是内置的类对象，也就是说它是一种类型的对象，可以和其它String、Array、Number、Object类的对象一样用于内置对象的管理。因为function实际上是一种对象，它可以“存储在变量中，通过参数传递给(别一个)函数(function)，在函数内部创建，从函数中返回结果值”。

因为function是内置对象，我们可以将它作为参数传递给另一个函数，延迟到函数中执行，甚至执行后将它返回。这是在JavaScript中使用回调函数的精髓。本篇文章的剩余部分将全面学习JavaScript的回调函数。回调函数也许是JavaScript中使用最广泛的功能性编程技术，也许仅仅一小段JavaScript或jQuery的代码都会给开发者留下一种神秘感，阅读这篇文章后，也许会帮你消除这种神秘感。

 

回调函数来自一种著名的编程范式——函数式编程，在基本层面上，函数式编程指定的了函数的参数。函数式编程虽然现在的使用范围变小了，但它一直被“专业的聪明的”程序员看作是一种难懂的技术，以前是这样，未来也将是如此。

幸运的是，函数式编程已经被阐述的像你我这样的一般人也能理解和使用。函数式编程最主要的技术之一就是回调函数，你很快会阅读到，实现回调函数就像传递一般的参数变量一样简单。这项技术如此的简单，以至于我都怀疑为什么它经常被包含在JavaScript的高级话题中去。

什么是回调或高级函数?

回调函数被认为是一种高级函数，一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数，回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式)，因此回调函数也被称为回调模式。

思考一下下面这种在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中。

细细体味一下另一个基本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的参数。

---

【补充foreach】

orEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

 

---

 

到目前为止，我们传递了一个匿名的函数作为参数给另一个函数或方法。在看其它更复杂的回调函数之前，让我们理解一下回调的工作原理并实现一个自己的回调函数。